import { Badge, Box, Chip, ChipGroupProps, Flex, Group, HoverCard, Typography } from '@tidbcloud/uikit'
import { Controller, useFormContext } from 'react-hook-form'

interface PlanSchema {
  name: 'free' | 'scalable'
  title: string
  badge?: string
  desc: React.ReactNode
  disabled: boolean
  tooltip?: string
}

export interface ClusterPlanSelectorProps extends ChipGroupProps {
  name: string
  badges?: {
    free?: string
    scalable?: string
  }
  plans?: {
    free?: Partial<PlanSchema>
    scalable?: Partial<PlanSchema>
  }
}

export const ClusterPlanSelector = ({ name, badges, plans, onChange, ...restProps }: ClusterPlanSelectorProps) => {
  const { control } = useFormContext()
  const defaultPlans: PlanSchema[] = [
    {
      name: 'free',
      title: 'Free Cluster',
      desc: 'No credit card required. Includes 5GiB storage and 50M request units. Ideal for small-scale applications. You can upgrade to Scalable Cluster any time.',
      badge: badges?.free,
      disabled: false,
      tooltip: '',
      ...plans?.free
    },
    {
      name: 'scalable',
      title: 'Scalable Cluster',
      desc: 'All benefits of Free Cluster plus expandable storage and request units. Seamlessly scales compute resources to meet workload demands. Optional advanced features include enhanced encryption at rest and regional high availability (HA). Credit card required.',
      badge: badges?.scalable,
      disabled: false,
      tooltip: '',
      ...plans?.scalable
    }
  ]
  const validPlans = defaultPlans
  const chips = validPlans.map((plan) => (
    <Box key={plan.name}>
      <HoverCard shadow="md" withArrow disabled={!plan.disabled || !plan.tooltip} position="right">
        <HoverCard.Target>
          <div>
            <Chip
              value={plan.name}
              radius="md"
              variant="outline"
              color="carbon.4"
              disabled={plan.disabled}
              styles={(t) => ({
                label: {
                  width: '100%',
                  height: 'auto',
                  whiteSpace: 'initial',
                  cursor: plan.disabled ? 'not-allowed' : 'pointer',
                  padding: 24,
                  '&[data-checked]': {
                    paddingLeft: 24,
                    paddingRight: 24,
                    borderColor: t.colors.carbon[9],
                    '&:hover': {
                      backgroundColor: 'transparent',
                      borderColor: t.colors.carbon[9]
                    }
                  },
                  '&:hover': {
                    borderColor: t.colors.carbon[5]
                  }
                },
                iconWrapper: {
                  display: 'none'
                }
              })}
            >
              <Group gap={8}>
                <Typography variant="headline-sm" c={plan.disabled ? 'carbon.6' : 'carbon.8'}>
                  {plan.title}
                </Typography>
                {plan.badge && (
                  <Badge radius="md" fw={500} h={28}>
                    {plan.badge}
                  </Badge>
                )}
              </Group>

              <Typography variant="body-lg" c={plan.disabled ? 'carbon.6' : 'carbon.8'}>
                {plan.desc}
              </Typography>
            </Chip>
          </div>
        </HoverCard.Target>
        <HoverCard.Dropdown maw={320}>
          <Typography variant="body-lg">{plan.tooltip}</Typography>
        </HoverCard.Dropdown>
      </HoverCard>
    </Box>
  ))

  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { onChange: onFormValChange, value } }) => {
        return (
          <Chip.Group
            {...restProps}
            value={value}
            onChange={(val) => {
              onFormValChange(val)
              onChange?.(val)
            }}
          >
            <Flex direction="column" align="stretch" gap={8}>
              {chips}
            </Flex>
          </Chip.Group>
        )
      }}
    />
  )
}