import { zodResolver } from '@hookform/resolvers/zod'
import { Divider } from '@tidbcloud/uikit'
import { Form } from '@tidbcloud/uikit/biz'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { z } from 'zod'

import { CloudProviderConst } from 'dbaas/features/Project'
import { useCancel } from 'dbaas/screens/ClustersV2/new/Wrapper/helpers'
import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2023/serverless/v1beta1/interface'

import { ClusterName } from '../components/ClusterName'
import { ClusterPlan } from '../components/ClusterPlan'
import { BaseTiDBNextGenFormValue, BaseTiDBNextGenFormValueSchema } from '../components/helper'
import { Layout } from '../components/Layout'
import { ProviderRegion } from '../components/ProviderRegion'
import { SwitchGenModal } from '../components/SwitchGenModal'

import { AdvancedSettings } from './AdvancedSettings'
import { Capacity } from './Capacity'
import { useFreeCount, useStarterFormStore } from './helper'
import { StarterSummary } from './StarterSummary'

export interface StarterFormValue extends BaseTiDBNextGenFormValue {
  spendingLimit: number
  encrypted: boolean
}

type StarterProps = {
  onChange?: (plan: Commonv1beta1ServicePlan) => void
  onGenChange?: () => void
}

export const Starter = ({ onChange, onGenChange }: StarterProps) => {
  const methods = useForm<StarterFormValue>({
    mode: 'onChange',
    defaultValues: {
      servicePlan: Commonv1beta1ServicePlan.Starter,
      provider: '',
      region: '',
      name: '',
      spendingLimit: 10,
      encrypted: false
    },
    resolver: async (data, context, options) => {
      const schema = BaseTiDBNextGenFormValueSchema.extend({
        spendingLimit: z
          .number({ message: 'Please enter an integer or a number with two decimal places.' })
          .min(0, 'The spending limit must be greater than or equal to 0'),
        encrypted: z.boolean()
      })
      return zodResolver(schema)(data, context, options)
    }
  })
  const { watch, setValue } = methods

  const provider = watch('provider')

  const { name, providers, regions, isLoading } = useStarterFormStore(provider, 'Starter')

  const { isLoading: freeCountIsLoading, hasFreeCount } = useFreeCount()

  useEffect(() => {
    setValue('spendingLimit', hasFreeCount ? 0 : 10)
  }, [hasFreeCount, setValue])

  const cancel = useCancel()

  useEffect(() => {
    if (name) {
      setValue('name', name)
    }
  }, [name, setValue])

  useEffect(() => {
    setValue('provider', CloudProviderConst.ALICLOUD)
  }, [providers, setValue])

  useEffect(() => {
    setValue('region', regions[0]?.name ?? '')
  }, [regions, setValue])

  const [modalOpened, modalHandlers] = useDisclosure(false)

  useEffect(() => {
    if (provider === CloudProviderConst.AWS) {
      modalHandlers.open()
    }
  }, [modalHandlers, provider])

  return (
    <Form form={methods} withActions={false} onSubmit={() => {}} h="100%" formMode="onChange">
      <Layout
        leftSection={
          <>
            <ClusterPlan value={Commonv1beta1ServicePlan.Starter} onChange={onChange} />
            <Divider />
            <ProviderRegion providers={providers} regions={regions} disabled={isLoading} />
            <Divider />
            <ClusterName disabled={isLoading} />
            <Divider />
            <Capacity disabled={freeCountIsLoading} />
            <Divider />
            <AdvancedSettings />
          </>
        }
        rightSection={<StarterSummary onCancel={cancel} />}
      ></Layout>
      <SwitchGenModal
        opened={modalOpened}
        switchingProvider={CloudProviderConst.AWS}
        onConfirm={() => {
          onGenChange?.()
          modalHandlers.close()
        }}
        onCancel={() => {
          setValue('provider', CloudProviderConst.ALICLOUD)
          modalHandlers.close()
        }}
      />
    </Form>
  )
}