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

import { HeroComponent, isHeroQueryReady } from 'dbaas/components/Measurement'
import { PageAccessGuard } from 'dbaas/contexts/access-control'
import { PageShell } from 'dbaas/layouts/v5/page'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'

import { EditCapacityBlock } from './EditCapacityBlock'
import { EditFormValueState } from './helpers'
import { PREMIUM_MAX_RCU_FALLBACK, PREMIUM_MIN_RCU, useCapacityLimits } from './shared/use-capacity-limits'
import { SumCard } from './SumCard'

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

  // Check quota to disable submit button if insufficient
  const { instanceMaxRcu, availableTotalRcu, isFetched, isError } = useCapacityLimits({
    servicePlan: tidb.servicePlan,
    excludeTidbId: tidb.tidbId
  })
  const effectiveLimit = Math.min(
    instanceMaxRcu ?? PREMIUM_MAX_RCU_FALLBACK,
    availableTotalRcu ?? PREMIUM_MAX_RCU_FALLBACK
  )
  const isQuotaInsufficient = effectiveLimit < PREMIUM_MIN_RCU

  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' }}>
                <EditCapacityBlock />
              </Box>
            </Card>
            <Box>
              <SumCard tidb={tidb} disabled={isQuotaInsufficient} />
            </Box>
          </FormProvider>
        </Flex>
      </PageAccessGuard>
    </PageShell>
  )
}