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

import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { PageShell } from 'dbaas/layouts/v5/page'

import { ClusterPlanField } from './ClusterPlanField'
import { EditFormValueState, useCancel } from './helpers'
import { SumCard } from './SumCard'

export const SpendinglimitEdit = ({ cluster }: { cluster: SharedCluster }) => {
  const cancel = useCancel()
  const formProps = useForm<EditFormValueState>({
    mode: 'onChange',
    defaultValues: {
      monthlySpendingLimit: 10
    }
  })

  return (
    <FormProvider {...formProps}>
      <Box h="100vh" sx={{ maxWidth: 1248, margin: '0 auto' }}>
        <PageShell title="Update Spending Limit" headerProps={{ withBack: true, onBackClick: cancel }}>
          <Flex gap="xl">
            <Card shadow="none" p="xl" sx={{ alignSelf: 'baseline' }}>
              <Box component="form" sx={{ position: 'relative' }}>
                <ClusterPlanField cluster={cluster} />
              </Box>
            </Card>
            <Box>
              <SumCard cluster={cluster} />
            </Box>
          </Flex>
        </PageShell>
      </Box>
    </FormProvider>
  )
}