import { zodResolver } from '@hookform/resolvers/zod'
import { PageShellBase } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'
import { useEffect, useId } from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import { useHistory, useParams } 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 { useGetOrgInfo, useGetWarehouseStatus, useScaleWarehouse } from 'dbaas/services/warehouse'
import { DtoCreateWarehouseRequestBody } from 'dbaas/services/warehouse/interface'
import useStores from 'dbaas/stores/useStores'

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

export const WarehouseModify = observer(() => {
  useAdjustHelpCenter()
  const {
    store: {
      lastVisitLocation: { orgId }
    }
  } = useStores()
  const history = useHistory()
  const updateWarehouse = useScaleWarehouse()
  const { data: orgInfo } = useGetOrgInfo(orgId)

  const header = <TidbCreationHeader title="Modify Warehouse" />
  const formId = useId()
  const formMethods = useForm<CreateWarehouseRequestBody>({
    mode: 'onChange',
    resolver: zodResolver(WarehouseFormSchema)
  })

  const { id: warehouseId } = useParams<{ id: string }>()

  const { data: warehouse } = useGetWarehouseStatus(orgId, warehouseId)

  const handleValidSubmit = (data: DtoCreateWarehouseRequestBody) => {
    return updateWarehouse
      .mutateAsync({
        orgId,
        warehouseName: warehouseId,
        data: {
          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')
      })
  }

  useEffect(() => {
    if (warehouse?.data) {
      const { id, size, autoSuspend, tags } = warehouse.data
      formMethods.reset(
        {
          name: id,
          size: JSON.stringify({ value: size }),
          autoSuspend: autoSuspend != null ? String(autoSuspend) : '',
          tags
        },
        { keepDirty: false }
      )
    }
  }, [warehouse])

  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={updateWarehouse.isLoading} orgInfo={orgInfo} />}
        >
          <WarehouseCreateForm
            formId={formId}
            onSubmit={formMethods.handleSubmit(handleValidSubmit)}
            orgInfo={orgInfo}
          />
        </TwoPaneLayout>
      </FormProvider>
    </PageShellBase.Root>
  )
})

export default WarehouseModify