import { Popover, ActionIcon, Grid, Typography } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'

const DataAppRole = () => {
  return (
    <>
      <Grid
        sx={(theme) => ({
          borderTop: `1px solid ${theme.colors.carbon[4]}`,
          fontWeight: 400,
          color: theme.colors.carbon[8],
          padding: '8px 0',
          textAlign: 'left'
        })}
      >
        <Grid.Col span={3}>ReadOnly</Grid.Col>
        <Grid.Col
          span={9}
          sx={() => ({
            whiteSpace: 'pre-wrap'
          })}
        >
          Grants access to retrieve data and perform read operations. This role is suitable for scenarios where only
          viewing and querying data is required.
        </Grid.Col>
      </Grid>
      <Grid
        sx={(theme) => ({
          borderTop: `1px solid ${theme.colors.carbon[4]}`,
          borderBottom: `1px solid ${theme.colors.carbon[4]}`,
          fontWeight: 400,
          color: theme.colors.carbon[8],
          padding: '8px 0',
          textAlign: 'left'
        })}
      >
        <Grid.Col span={3}>ReadAndWrite</Grid.Col>
        <Grid.Col
          span={9}
          sx={() => ({
            whiteSpace: 'pre-wrap'
          })}
        >
          Provides full access, allowing data retrieval as well as modification. Use this role only when you need to
          perform both read and write operations on your data.
        </Grid.Col>
      </Grid>
    </>
  )
}

const Chat2QueryAppRole = () => {
  return (
    <>
      {[
        {
          label: 'Chat2Query Admin',
          value:
            'Allows the API key to management data summary, generate sql from a question, execute any SQL statement'
        },
        {
          label: 'Chat2Query Data Summary Management',
          value: 'Only allows the API key to generate, update and delete data summary'
        },
        {
          label: 'Chat2Query SQL ReadOnly',
          value: 'Can generate SQL from a question, but only allows the API key to execute SELECT SQL statement'
        },
        {
          label: 'Chat2Query SQL ReadWrite',
          value: 'Can generate SQL from a question, but only allows the API key to execute any SQL statement'
        }
      ].map((item) => (
        <Grid
          sx={(theme) => ({
            borderTop: `1px solid ${theme.colors.carbon[4]}`,
            fontWeight: 400,
            color: theme.colors.carbon[8],
            margin: '8px 0 0',
            textAlign: 'left'
          })}
        >
          <Grid.Col span={4}>{item.label}</Grid.Col>
          <Grid.Col
            span={8}
            sx={() => ({
              whiteSpace: 'pre-wrap'
            })}
          >
            {item.value}
          </Grid.Col>
        </Grid>
      ))}
    </>
  )
}

const RoleAdditionalInfo = ({ type }: { type: string }) => {
  const [opened, { close, open }] = useDisclosure(false)

  return (
    <Popover position="top" width={630} withArrow shadow="md" opened={opened}>
      <Popover.Target>
        <ActionIcon
          aria-label="Role Additional Info"
          color="carbon.8"
          variant="transparent"
          onMouseEnter={open}
          onMouseLeave={close}
        >
          <IconInfoCircle size={14} />
        </ActionIcon>
      </Popover.Target>

      <Popover.Dropdown>
        <Typography variant="title-lg" c="carbon.8">
          Role
        </Typography>

        {type === 'chat2query' ? <Chat2QueryAppRole /> : <DataAppRole />}
      </Popover.Dropdown>
    </Popover>
  )
}

export default RoleAdditionalInfo