import { zodResolver } from '@hookform/resolvers/zod'
import { PageShellBase } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'
import { useId } from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import { useHistory } from 'react-router-dom'

import { TidbCreationHeader } from 'dbaas/screens/NextGen/my-tidb-creation/layout/TidbCreationHeader'
import { TwoPaneLayout } from 'dbaas/screens/NextGen/my-tidb-creation/layout/TwoPaneLayout'
import { useAdjustHelpCenter } from 'dbaas/screens/NextGen/my-tidb-creation/shared/use-adjust-help-center'
import { useCreateWarehouse, useGetOrgInfo } from 'dbaas/services/warehouse'
import { DtoCreateWarehouseRequestBody } from 'dbaas/services/warehouse/interface'
import useStores from 'dbaas/stores/useStores'

import { WarehouseFormSchema } from './schema'
import { WarehouseCreateForm } from './WarehouseCreateForm'
import { WarehouseSummary } from './WarehouseSummary'

export type CreateWarehouseRequestBody = Omit<DtoCreateWarehouseRequestBody, 'autoSuspend'> & {
  autoSuspend?: string | number
}

export const MyLakeCreationPage = observer(() => {
  useAdjustHelpCenter()
  const {
    store: {
      lastVisitLocation: { orgId }
    }
  } = useStores()
  const history = useHistory()
  const createWarehouse = useCreateWarehouse()
  const { data: orgInfo } = useGetOrgInfo(orgId)

  const header = <TidbCreationHeader title="Create Warehouse" />
  const formId = useId()
  const formMethods = useForm<CreateWarehouseRequestBody>({
    mode: 'onChange',
    defaultValues: {
      name: '',
      size: '',
      tags: {},
      autoSuspend: '300'
    },
    resolver: zodResolver(WarehouseFormSchema)
  })

  const handleValidSubmit = (data: DtoCreateWarehouseRequestBody) => {
    return createWarehouse
      .mutateAsync({
        orgId,
        data: {
          name: data.name,
          size: JSON.parse(data.size ?? '{}').value,
          autoSuspend: Number(data.autoSuspend),
          tags: data.tags ? (typeof data.tags === 'object' ? data.tags : JSON.parse(data.tags)) : undefined
        }
      })
      .then(() => {
        history.push('/lakes')
      })
  }

  return (
    <PageShellBase.Root
      sx={{
        backgroundColor: 'var(--mantine-color-carbon-1)',
        height: '100%',
        overflow: 'hidden'
      }}
    >
      <FormProvider {...formMethods}>
        <TwoPaneLayout
          visible={true}
          header={header}
          rightSection={<WarehouseSummary formId={formId} isPending={createWarehouse.isLoading} orgInfo={orgInfo} />}
        >
          <WarehouseCreateForm
            formId={formId}
            onSubmit={formMethods.handleSubmit(handleValidSubmit)}
            orgInfo={orgInfo}
          />
        </TwoPaneLayout>
      </FormProvider>
    </PageShellBase.Root>
  )
})