import { Group, HoverCard, SelectProps, Stack, Typography } from '@tidbcloud/uikit'
import { IconCheck } from '@tidbcloud/uikit/icons'

import type { KafkaPrivateEndpointOption } from './kafkaPrivateEndpointOptionHelpers'

export const renderKafkaPrivateEndpointOption: SelectProps['renderOption'] = ({ option, checked }) => {
  const privateEndpointOption = option as KafkaPrivateEndpointOption
  const content = (
    <Group
      wrap="nowrap"
      justify="space-between"
      data-testid="changefeed-kafka-private-endpoint-option"
      data-endpoint-id={privateEndpointOption.value}
      sx={{
        flex: 1,
        minWidth: 0,
        cursor: privateEndpointOption.disabled ? 'not-allowed' : undefined
      }}
    >
      <Stack gap={0} sx={{ minWidth: 0 }}>
        <Typography variant="title-md" fw={500} truncate>
          {privateEndpointOption.label}
        </Typography>
        {privateEndpointOption.disabledReason && (
          <Typography variant="body-lg" c="carbon.7">
            Unavailable
          </Typography>
        )}
      </Stack>

      {checked && <IconCheck size={16} strokeWidth={3} style={{ marginInlineStart: 'auto' }} />}
    </Group>
  )

  if (!privateEndpointOption.disabledReason) {
    return content
  }

  return (
    <HoverCard withArrow position="right" shadow="md" withinPortal openDelay={200}>
      <HoverCard.Target>{content}</HoverCard.Target>
      <HoverCard.Dropdown maw={320}>
        <Typography variant="body-lg" sx={{ wordBreak: 'break-word' }}>
          {privateEndpointOption.disabledReason}
        </Typography>
      </HoverCard.Dropdown>
    </HoverCard>
  )
}