import { Accordion, Alert, Box, Chip, Flex, HoverCard, Select, Typography } from '@tidbcloud/uikit'
import { IconInfoCircle, IconMinusCircle } from '@tidbcloud/uikit/icons'
import { useMemo } from 'react'

import { ParamType } from '../types'

import { AccordionWrap } from './common'
import { InputParam } from './Params'

const ExecuteEndpointParams: React.FC<React.PropsWithChildren<{ args: ParamType[] }>> = ({ args }) => {
  const list = [
    {
      label: 'cluster_id',
      description: 'Cluster where the SQL statement will execute',
      tips: 'TiDB Cluster to use',
      required: false
    },
    {
      label: 'database',
      description: 'Database containing objects involved within SQL statement',
      tips: 'Database within the cluster',
      required: false
    },
    {
      label: 'sql',
      description: 'The actual SQL statement',
      tips: 'SQL statement',
      noDefaultValue: true,
      required: true
    }
  ]

  const defaultValues = useMemo(() => {
    const result = {} as ParamType
    ;(args || []).forEach((arg) => {
      result[arg.name] = arg.default
    })
    return result
  }, [args])

  return (
    <AccordionWrap defaultValue="systemEndpoint">
      <Accordion.Item value="systemEndpoint">
        <Accordion.Control>
          <Flex align="center">
            <Typography variant="title-sm">Definition</Typography>
            <HoverCard width={320} withArrow position="top" shadow="md">
              <HoverCard.Target>
                <Box component={IconInfoCircle} size={14} c="carbon.8" ml={2} sx={{ cursor: 'pointer' }}></Box>
              </HoverCard.Target>
              <HoverCard.Dropdown>
                <Typography variant="body-sm">
                  The parameters displayed below are predefined and cannot be customized. Additionally, you cannot
                  create or modify your own parameters for this endpoint.
                </Typography>
              </HoverCard.Dropdown>
            </HoverCard>
          </Flex>
        </Accordion.Control>
        <Accordion.Panel>
          {list.map((item) => (
            <Box
              sx={(theme) => ({
                padding: '0 16px',
                borderBottom: `1px solid ${theme.colors.carbon[5]}`
              })}
            >
              <Flex align="center" my={8} justify="space-between">
                <Box
                  sx={{
                    flex: 1,
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis'
                  }}
                >
                  <Typography variant="title-sm">{item.label}</Typography>
                </Box>

                <Chip
                  size="xs"
                  checked={item.required}
                  styles={(theme) => ({
                    label: {
                      borderRadius: theme.defaultRadius,
                      height: '22px',
                      lineHeight: '20px',
                      paddingLeft: 8,
                      paddingRight: 8,
                      '&[data-checked]': {
                        paddingLeft: 8,
                        paddingRight: 8,
                        '&, &:hover': {
                          backgroundColor: theme.white,
                          color: theme.colors.blue[8]
                        }
                      }
                    }
                  })}
                >
                  {item.required ? (
                    'Required'
                  ) : (
                    <Flex align="center" sx={{ position: 'relative' }}>
                      <Flex w={16.6}>
                        <IconMinusCircle size={10} />
                      </Flex>
                      Required
                    </Flex>
                  )}
                </Chip>
              </Flex>

              <Flex align="center" justify="space-between">
                <Typography variant="body-sm" c="carbon.9">
                  Type
                </Typography>
                <Select
                  size="xs"
                  placeholder="Type"
                  disabled
                  styles={() => ({
                    root: {
                      width: '60%'
                    },
                    input: {
                      height: 22,
                      minHeight: 22,
                      lineHeight: '18px',
                      fontSize: 12
                    }
                  })}
                  data={[{ value: 'string', label: 'STRING' }]}
                  value="string"
                />
              </Flex>

              {!item.noDefaultValue && (
                <Flex align="center" m="8px 0" justify="space-between" wrap="nowrap">
                  <Typography variant="body-sm" c="carbon.9">
                    Default Value
                  </Typography>
                  <InputParam disabled value={defaultValues[item.label]} />
                </Flex>
              )}

              <Flex align="center" m="8px 0" justify="space-between" wrap="nowrap">
                <Flex align="center">
                  <Typography variant="body-sm" c="carbon.9">
                    Description
                  </Typography>
                  <HoverCard width={320} withArrow position="top" shadow="md">
                    <HoverCard.Target>
                      <Box component={IconInfoCircle} size={14} c="carbon.8" ml={2} sx={{ cursor: 'pointer' }}></Box>
                    </HoverCard.Target>
                    <HoverCard.Dropdown>
                      <Typography variant="body-sm">{item.description}</Typography>
                    </HoverCard.Dropdown>
                  </HoverCard>
                </Flex>
                <InputParam disabled placeholder={item.tips ?? ''} />
              </Flex>
            </Box>
          ))}
          <Alert color="peacock">Parameters are disabled because this is a system-provided endpoint.</Alert>
        </Accordion.Panel>
      </Accordion.Item>
    </AccordionWrap>
  )
}

export default ExecuteEndpointParams