import { CardProps } from '@tidbcloud/uikit'
import { Control, useWatch } from 'react-hook-form'

import { SumCardForDedicated } from '../Dedicated'
import { SumCardForEssential } from '../Essential/SumCard/SumCard'
import { CreationFormValueState } from '../helpers/form'
import { SumCardForServerless } from '../Serverless'

import { useCancel } from './helpers'

export const SumCard = ({ control }: { control: Control<CreationFormValueState> }) => {
  const tierState = useWatch({ control, name: 'tier' })
  const starterActive = tierState === 'serverless'
  const essentialActive = tierState === 'essential'
  const dedicatedActive = tierState === 'dedicated'

  const cancel = useCancel()
  const cardStyle: CardProps['sx'] = {
    position: 'sticky',
    top: 'var(--app-page-shell-header-height)'
  }

  return (
    <>
      {starterActive && <SumCardForServerless onCancel={cancel} cardProps={{ sx: cardStyle }} />}
      {essentialActive && <SumCardForEssential onCancel={cancel} cardProps={{ sx: cardStyle }} />}
      {dedicatedActive && <SumCardForDedicated onCancel={cancel} cardProps={{ sx: cardStyle }} />}
    </>
  )
}