import { Box, Card, Flex } from '@tidbcloud/uikit'
import { useEffect } from 'react'
import { FormProvider, useForm } from 'react-hook-form'

import config from 'config'
import { HeroComponent, isHeroQueryReady } from 'dbaas/components/Measurement'
import { PageAccessGuard } from 'dbaas/contexts/access-control'
import { PageShell } from 'dbaas/layouts/v5/page'
import {
  ESSENTIAL_V2_RCU_MAX,
  ESSENTIAL_V2_RCU_MIN
} from 'dbaas/screens/NextGen/my-tidb-creation/plans/EssentialV2/schema'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'

import { EssentialV2EditCapacityBlock } from './EssentialV2EditCapacityBlock'
import { EssentialV2SumCard } from './EssentialV2SumCard'
import { EditFormValueState } from './helpers'
import { useEssentialV2CapacityLimits } from './use-essential-v2-capacity-limits'

const EssentialV2CapacityEdit = () => {
  const tidb = useSharedTiDBContext()
  const formProps = useForm<EditFormValueState>({
    mode: 'onChange',
    defaultValues: {
      maxRcu: Number.parseFloat(tidb?.maxRcu)
    }
  })

  const { instanceMaxRcu, availableTotalRcu, isFetched, isError } = useEssentialV2CapacityLimits({
    excludeTidbId: tidb.tidbId,
    projectId: tidb.computed.projectId
  })
  const effectiveLimit = Math.min(
    instanceMaxRcu ?? ESSENTIAL_V2_RCU_MAX,
    availableTotalRcu ?? ESSENTIAL_V2_RCU_MAX,
    ESSENTIAL_V2_RCU_MAX
  )
  const isQuotaInsufficient = effectiveLimit < ESSENTIAL_V2_RCU_MIN

  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Update Capacity`
  }, [])

  useEffect(() => {
    if (tidb.maxRcu !== undefined) {
      formProps.setValue('maxRcu', Number.parseFloat(tidb.maxRcu))
    }
  }, [tidb.maxRcu, formProps])

  return (
    <PageShell title="Update Capacity" headerProps={{ withBack: true }}>
      <HeroComponent ready={isHeroQueryReady({ isFetched, isError })} />
      <PageAccessGuard id="TidbxCapacityUpdate">
        <Flex gap={16} maw={1216} mx="auto">
          <FormProvider {...formProps}>
            <Card shadow="none" p="xl" sx={{ alignSelf: 'baseline' }}>
              <Box component="form" sx={{ position: 'relative' }}>
                <EssentialV2EditCapacityBlock />
              </Box>
            </Card>
            <Box>
              <EssentialV2SumCard tidb={tidb} disabled={isQuotaInsufficient} />
            </Box>
          </FormProvider>
        </Flex>
      </PageAccessGuard>
    </PageShell>
  )
}

export default EssentialV2CapacityEdit