import {
  Container,
  Grid,
  BackgroundImage,
  Center,
  Box,
  Card,
  MediaQuery,
  useComputedColorScheme
} from '@tidbcloud/uikit'
import { FormProvider, useForm } from 'react-hook-form'

import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { formSizes, summarySizes, useFormSize, useSummarySize } from 'dbaas/layouts/templates/form-with-summary'
import { PageShell } from 'dbaas/layouts/v5/page'
import rightBgImgDark from 'media/cluster-creation-right-bg-dark.svg'
import rightBgImgLight from 'media/cluster-creation-right-bg.svg'

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

export const ClusterPlanEdit = ({ cluster }: { cluster: SharedCluster }) => {
  const colorScheme = useComputedColorScheme()
  const formSize = useFormSize()
  const sumCardSize = useSummarySize()

  const formProps = useForm<EditFormValueState>({
    mode: 'onChange',
    defaultValues: {
      plan: 'scalable',
      monthlySpendingLimit: 1
    }
  })

  return (
    <FormProvider {...formProps}>
      <Box h="100vh">
        <Box sx={{ height: '100%', position: 'relative', overflowX: 'auto' }}>
          <MediaQuery smallerThan="lg" styles={{ minWidth: 960 }}>
            <Grid
              columns={5}
              gutter={0}
              w="100%"
              h="100%"
              sx={{ position: 'absolute' }}
              styles={{ inner: { height: '100%' } }}
            >
              <Grid.Col span={3} bg="carbon.1" sx={{ display: 'flex', flexDirection: 'column' }}>
                <PageShell title="Update Instance Plan" headerProps={{ withBack: true }} bodyProps={{ pt: 'md' }}>
                  <Container sx={{ '--container-size': formSizes[formSize] }}>
                    <Card shadow="none" p="xl">
                      <Box component="form" sx={{ position: 'relative' }}>
                        <ClusterPlanField cluster={cluster} />
                      </Box>
                    </Card>
                  </Container>
                </PageShell>
              </Grid.Col>
              <Grid.Col span={2} bg="carbon.2" sx={{ position: 'relative' }}>
                <BackgroundImage
                  src={colorScheme === 'dark' ? rightBgImgDark : rightBgImgLight}
                  radius={0}
                  h="100%"
                  sx={{
                    position: 'absolute',
                    mixBlendMode: 'luminosity',
                    opacity: 0.6
                  }}
                />
                <Center p="xl" pb={80} h="100%">
                  <Container px={0} sx={{ '--container-size': summarySizes[sumCardSize], flexGrow: 1 }}>
                    <SumCard cluster={cluster} />
                  </Container>
                </Center>
              </Grid.Col>
            </Grid>
          </MediaQuery>
        </Box>
      </Box>
    </FormProvider>
  )
}