import { Accordion, Grid, Box, Alert, AlertProps } from '@tidbcloud/uikit'
import { useMediaQuery } from '@tidbcloud/uikit/hooks'
import { IconCheckCircle } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useFormContext } from 'react-hook-form'

import useStores from 'dbaas/stores/useStores'

import { HeadLabel, TierBtn } from '../components'
import { useTierBtnSubtitleHeight } from '../components/use-sync-tierbtn-subtitle-height'
import { DedicatedFormContent } from '../Dedicated'
import { EssentialFormContent } from '../Essential/FormContent/FormContent'
import { CreationFormValueState } from '../helpers'
import { ServerlessFormContent as StarterFormContent } from '../Serverless'

export const CMEKActiveAlert = (props: AlertProps) => {
  return (
    <Alert color="green" icon={<IconCheckCircle size={14} />} {...props}>
      Since CMEK is already enabled in current project, so this new cluster you create will automatically be encrypted
      by CMEK. It only support Dedicated plan now and will protect your cluster storage data at rest. Learn more about{' '}
      <a href="https://docs.pingcap.com/tidbcloud/tidb-cloud-encrypt-cmek-aws" target="_blank" rel="noreferrer">
        CMEK
      </a>
      .
    </Alert>
  )
}

export const CreationForm = observer(() => {
  const {
    store: {
      activeProject: { aws_cmek_enabled: awsCmekEnabled }
    }
  } = useStores()

  const { register, watch, setValue } = useFormContext<CreationFormValueState>()
  const tier = watch('tier')
  const starterActive = tier === 'serverless'
  const essentialActive = tier === 'essential'
  const dedicatedActive = tier === 'dedicated'
  const changeTier = (tier: CreationFormValueState['tier']) => setValue('tier', tier)

  // Height synchronization for multi-column layout (>= lg)
  const syncHeightEnabled = useMediaQuery('(min-width: 1200px)') ?? false
  const {
    measureRefs: [subRef1, subRef2, subRef3],
    maxHeight: subtitleMih
  } = useTierBtnSubtitleHeight(syncHeightEnabled)
  const visibleTierLength = 3

  return (
    <Box component="form" sx={{ position: 'relative' }}>
      <input type="hidden" {...register('initializing.serverless')} />
      <input type="hidden" {...register('initializing.essential')} />
      <input type="hidden" {...register('initializing.dedicated')} />
      <input type="hidden" {...register('tier')} />
      <Accordion
        variant="contained"
        multiple
        defaultValue={[
          'tier',
          'serverlessBasic',
          'serverlessName',
          'serverlessCapacity',
          'serverlessAdvanced',
          'essentialCloudRegion',
          'essentialName',
          'essentialCapacity',
          'essentialEncryption',
          'essentialHighAvailability',
          'dedicatedProvider',
          'dedicatedRegion',
          'dedicatedSizes',
          'dedicatedName',
          'dedicatedPort',
          'dedicatedCidr'
        ]}
        styles={{
          control: {
            padding: 24
          },
          label: {
            paddingTop: 0,
            paddingBottom: 0
          },
          content: {
            padding: 24,
            paddingTop: 0
          }
        }}
      >
        <Accordion.Item value="tier">
          <Accordion.Control data-mp-no-event>
            <HeadLabel label="Choose a Plan" description="Start your journey on TiDB Cloud." />
          </Accordion.Control>
          <Accordion.Panel>
            {awsCmekEnabled && <CMEKActiveAlert mb={24} />}
            <Grid gutter={8}>
              <Grid.Col span={{ md: 12, lg: 12 / visibleTierLength }}>
                <TierBtn
                  title="Starter"
                  subtitle="Start free and scale as you grow."
                  descriptions={[
                    'On-demand compute and storage that scales to zero',
                    '5GiB storage and 50M Request Units free each month',
                    'Private connectivity',
                    'Data protection in transit and at rest',
                    '99.9% availability'
                  ]}
                  disabled={awsCmekEnabled}
                  active={starterActive}
                  onClick={() => changeTier('serverless')}
                  titleProps={{ c: 'magenta.8' }}
                  subtitleProps={{ wrapperRef: subRef1, wrapperMih: subtitleMih }}
                  h="100%"
                  data-mp-event="Serverless Tier Tab Clicked"
                  data-mp-source="Clusters - Creation v2"
                />
              </Grid.Col>
              <Grid.Col span={{ md: 12, lg: 12 / visibleTierLength }}>
                <TierBtn
                  title="Essential"
                  subtitle="Provisioned scalability with simplicity and control."
                  descriptions={[
                    'Simple provisioned compute that scales up instantly with Request Capacity Units, plus on-demand storage',
                    'Private connectivity',
                    '14 days backup retention with Point-in-Time Recovery',
                    'Dual-layer data encryption',
                    '99.99% availability with multi-zone redundancy'
                  ]}
                  badge="Preview"
                  disabled={awsCmekEnabled}
                  active={essentialActive}
                  onClick={() => changeTier('essential')}
                  titleProps={{ c: 'violet.8' }}
                  subtitleProps={{ wrapperRef: subRef2, wrapperMih: subtitleMih }}
                  h="100%"
                  data-mp-event="Essential Tier Tab Clicked"
                  data-mp-source="Clusters - Creation v2"
                />
              </Grid.Col>
              <Grid.Col span={{ md: 12, lg: 12 / visibleTierLength }}>
                <TierBtn
                  title="Dedicated"
                  subtitle="Dedicated single-tenant clusters with pay-as-you-go."
                  descriptions={[
                    'Seamless scaling up to PB',
                    'Dedicated resource isolation',
                    'Private network connectivity',
                    'Encryption in transit & at rest (CMEK)',
                    'Metrics integration',
                    'Reliable 99.99% SLA'
                  ]}
                  active={dedicatedActive}
                  onClick={() => changeTier('dedicated')}
                  titleProps={{ c: 'aqua.8' }}
                  subtitleProps={{ wrapperRef: subRef3, wrapperMih: subtitleMih }}
                  h="100%"
                  data-mp-event="Dedicated Tier Tab Clicked"
                  data-mp-source="Clusters - Creation v2"
                  data-testid="create-cluster-form-dedicated-card"
                />
              </Grid.Col>
            </Grid>
          </Accordion.Panel>
        </Accordion.Item>
        {starterActive && <StarterFormContent />}
        {essentialActive && <EssentialFormContent />}
        {dedicatedActive && <DedicatedFormContent />}
      </Accordion>
    </Box>
  )
})