import { Card, Divider, Flex, Skeleton, Stack } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import { useFormContext } from 'react-hook-form'

import { getCloudProviderLabel } from 'dbaas/features/Project'
import { HeadLabel, SumInfoItem } from 'dbaas/screens/ClustersV2/new/components'
import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2023/serverless/v1beta1/interface'

import { CancelButton } from '../components/CancelButton'
import { CreateButton } from '../components/CreateButton'
import { CreditAdd } from '../components/CreditAdd'
import { RegionNameItem } from '../components/RegionNameItem'
import { SummaryItem } from '../components/SummaryItem'

import { useStarterFormStore, useAddCreditCard } from './helper'
import { SpendLimitInfo } from './SpendLimitInfo'

import { StarterFormValue } from './index'

interface SumCardProps {
  className?: string
  disabled?: boolean
  onCancel: () => void
}

export const StarterSummary = observer(({ className, disabled, onCancel }: SumCardProps) => {
  const {
    watch,
    formState: { errors }
  } = useFormContext<StarterFormValue>()
  const provider = watch('provider')
  const { regions, isLoading } = useStarterFormStore(provider, 'Starter')
  const spendLimitMonthly = watch('spendingLimit')
  const encrypted = watch('encrypted')

  const { creditAddVisible, creditModalVisible, creditModalHandlers } = useAddCreditCard(spendLimitMonthly)
  const isFormError = !!Object.keys(errors).length

  return (
    <Card className={className} p="xl" sx={{ position: 'sticky', top: 'var(--app-page-shell-header-height)' }}>
      <HeadLabel label="Summary" description="Your new cluster will be:" />

      <Stack justify="flex-start" gap={8} py="xl">
        <SumInfoItem label="Plan" value="Starter" labelProps={{ w: 144 }} />
        <SumInfoItem
          label="Provider"
          value={isLoading ? <Skeleton width={80} height={16} /> : getCloudProviderLabel(provider)}
          labelProps={{ w: 144 }}
        />
        <RegionNameItem loading={isLoading} regions={regions} />
        <SummaryItem label="Name" name="name" loading={isLoading} isError={!!errors?.name} />
        <SummaryItem
          label="Spending Limit"
          name="spendingLimit"
          defaultValue={`$${spendLimitMonthly || 0} / month`}
          loading={isLoading}
        />
        <SumInfoItem
          label="Dual-Layer Data Encryption"
          value={encrypted ? 'Enabled' : 'Disabled'}
          labelProps={{ w: 144 }}
        />
      </Stack>

      <Divider />

      <SpendLimitInfo value={spendLimitMonthly} py="xl" />

      <Flex align="center" gap="md">
        <CancelButton onCancel={onCancel} servicePlan={Commonv1beta1ServicePlan.Starter} />

        {!isLoading && creditAddVisible ? (
          <CreditAdd
            disabled={disabled || isFormError}
            creditAddVisible={true}
            creditModalVisible={creditModalVisible}
            creditModalHandlers={creditModalHandlers}
          />
        ) : (
          <CreateButton
            loading={isLoading}
            disabled={disabled || isFormError}
            type={Commonv1beta1ServicePlan.Starter}
          />
        )}
      </Flex>
    </Card>
  )
})