import { Accordion, Typography, Stack, Group, Flex, Divider, HoverCard, Box } from '@tidbcloud/uikit'
import { FormNumberInput } from '@tidbcloud/uikit/biz'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { useFormContext } from 'react-hook-form'

import { HeadLabel } from '../../components'
import { CreationFormValueState } from '../../helpers'
import { ESSENTIAL_RCU_MAX, ESSENTIAL_RCU_MIN, ESSENTIAL_RCU_STEP } from '../shared/capacity'

export const EssentialCapacityItem = () => {
  const { watch, trigger } = useFormContext<Pick<CreationFormValueState, 'essential'>>()
  const minRcu = watch('essential.minRcu')

  return (
    <>
      <Accordion.Control data-mp-no-event>
        <HeadLabel
          label="Capacity"
          description={
            <>
              Cluster provisioned capacity is measured in Request Capacity Units (RCUs). TiDB Cloud automatically
              creates scaling rules based on the minimum and maximum capacity setting.{' '}
              <a href="https://www.pingcap.com/tidb-cloud-essential-pricing-details/" target="_blank" rel="noreferrer">
                {' '}
                Learn more
              </a>
              .
            </>
          }
        />
      </Accordion.Control>
      <Accordion.Panel>
        <Stack gap={8}>
          <Group align="flex-start" gap="xl">
            <FormNumberInput
              name="essential.minRcu"
              leftAddon={
                <Group gap={4} wrap="nowrap" component="span">
                  min
                  <HoverCard shadow="md" withArrow width={400}>
                    <HoverCard.Target>
                      <IconInfoCircle sx={{ cursor: 'pointer' }} />
                    </HoverCard.Target>
                    <HoverCard.Dropdown>
                      <Typography variant="body-lg">
                        Keep the value at the minimum ({ESSENTIAL_RCU_MIN}) if cost is a concern and traffic is bursty.
                        Increase it if you require more consistent performance, smoother autoscaling, or better
                        readiness for sudden surges.
                      </Typography>
                    </HoverCard.Dropdown>
                  </HoverCard>
                </Group>
              }
              suffix=" RCUs"
              min={ESSENTIAL_RCU_MIN}
              max={ESSENTIAL_RCU_MAX}
              step={ESSENTIAL_RCU_STEP}
              rules={{
                required: 'Required',
                min: { value: ESSENTIAL_RCU_MIN, message: `RCUs should be greater than ${ESSENTIAL_RCU_MIN}` },
                max: { value: ESSENTIAL_RCU_MAX, message: `RCUs should be less than ${ESSENTIAL_RCU_MAX}` },
                validate: (val) => {
                  if (val % ESSENTIAL_RCU_STEP !== 0) {
                    return `RCUs should be in increments of ${ESSENTIAL_RCU_STEP}`
                  }
                  return true
                }
              }}
              flex={1}
              onChange={() => {
                trigger('essential.maxRcu')
              }}
            />
            <Flex align="center" h={40}>
              <Divider color="carbon.5" w={16}></Divider>
            </Flex>
            <FormNumberInput
              name="essential.maxRcu"
              leftAddon={
                <Group gap={4} wrap="nowrap" component="span">
                  max
                  <HoverCard shadow="md" withArrow width={400}>
                    <HoverCard.Target>
                      <IconInfoCircle sx={{ cursor: 'pointer' }} />
                    </HoverCard.Target>
                    <HoverCard.Dropdown>
                      <Typography variant="body-lg">
                        TiDB Cloud offers a small buffer above the maximum RCU to accommodate short bursts in demand and
                        lower the chance of throttling. Continuous demand that exceeds the maximum, though, may still
                        lead to throttling.
                      </Typography>
                    </HoverCard.Dropdown>
                  </HoverCard>
                </Group>
              }
              suffix=" RCUs"
              min={ESSENTIAL_RCU_MIN}
              max={ESSENTIAL_RCU_MAX}
              step={ESSENTIAL_RCU_STEP}
              rules={{
                required: 'Required',
                min: { value: ESSENTIAL_RCU_MIN, message: `RCUs should be greater than ${ESSENTIAL_RCU_MIN}` },
                max: { value: ESSENTIAL_RCU_MAX, message: `RCUs should be less than ${ESSENTIAL_RCU_MAX}` },
                validate: (val) => {
                  if (val % ESSENTIAL_RCU_STEP !== 0) {
                    return `RCUs should be in increments of ${ESSENTIAL_RCU_STEP}`
                  }
                  if (val && val < minRcu) {
                    return 'Max RCUs should be greater or equal to min RCUs'
                  }
                  return true
                }
              }}
              flex={1}
              onChange={() => {
                trigger('essential.minRcu')
              }}
            />
          </Group>
          <Typography variant="body-md" c="carbon.7">
            <Box component="span" fw={500}>
              Minimum Billing RCUs = {minRcu && minRcu > ESSENTIAL_RCU_MIN ? minRcu : ESSENTIAL_RCU_MIN}.
            </Box>{' '}
            If your actual usage is below this limit, you will be billed for this amount. RCUs start from 2,000 and can
            be increased up to 100,000 in increments of 100.
          </Typography>
        </Stack>
      </Accordion.Panel>
    </>
  )
}