import { Box, Flex, Button, Grid } from '@tidbcloud/uikit'
import { Form } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'
import { useState } from 'react'
import { useForm } from 'react-hook-form'

import { useAccessCheck } from 'dbaas/contexts/access-control'
import { PageShell } from 'dbaas/layouts/v5/page'
import useQuery from 'dbaas/utils/useQuery'

import Footer from './Footer'
import Header from './Header'
import { useAddVercelLink, CONFIG_DEFAULT_VALUES } from './helpers'
import Step1 from './Step1'
import Step2 from './Step2'
import { VercelntegrationFormValues } from './types.d'

const AddIntegration = () => {
  const [selectedProject, setSelectedProject] = useState('')
  const actionEnabled = useAccessCheck('ProjectIntegrationAction', {
    projectId: selectedProject
  })

  const [curStep, setCurStep] = useState(1)
  const query = useQuery()
  const [loading, setLoading] = useState(false)
  const [type, setType] = useState('cluster')
  const [vercelPros, setVercelPros] = useState<string[]>([])

  const { submit } = useAddVercelLink()

  const handleSubmit = async (values: VercelntegrationFormValues) => {
    setLoading(true)
    const callback = () => {
      setLoading(false)
      // Vercel will use `next` query param to confirm the connection.
      window.location.href = query.get('next')!
    }

    submit(values, type, callback, () => {
      setLoading(false)
    })
  }

  const form = useForm({
    mode: 'all',
    reValidateMode: 'onChange',
    defaultValues: CONFIG_DEFAULT_VALUES
  })

  return (
    <PageShell
      bodyProps={{
        pt: 0,
        pb: 0,
        pl: 0,
        pr: 0,
        p: 0
      }}
    >
      <Box>
        <Flex
          gap={24}
          direction="column"
          align="center"
          justify="space-between"
          h={`calc(100vh - 81px)`}
          sx={{ overflow: 'auto', paddingBottom: 24 }}
        >
          <Header />

          <Flex
            align="center"
            justify="center"
            sx={{
              flex: 1
            }}
          >
            <Box w={400}>
              <Form form={form} withActions={false} layout="none" onSubmit={handleSubmit}>
                <Box
                  sx={{
                    display: curStep === 1 ? 'block' : 'none'
                  }}
                >
                  <Step1 vercelProChanged={(values) => setVercelPros(values)} />

                  <Flex mt={32} justify="flex-end">
                    <Button
                      onClick={() => setCurStep(2)}
                      disabled={!vercelPros.length}
                      data-mp-event="mp-next-1691461012479"
                    >
                      Next
                    </Button>
                  </Flex>
                </Box>

                <Box
                  sx={{
                    display: curStep === 2 ? 'block' : 'none'
                  }}
                >
                  <Step2
                    onProjectChange={setSelectedProject}
                    onTypeChange={(value) => setType(value)}
                    onFrameworkChange={() => {}}
                  />
                  <Grid grow={false} mt={32} mb={24} gutter={'xs'}>
                    <Grid.Col span={3}>
                      <Button
                        data-mp-event="Vercel Back Button Clicked"
                        variant="default"
                        onClick={() => setCurStep(1)}
                      >
                        Back
                      </Button>
                    </Grid.Col>
                    <Grid.Col span={9}>
                      <Button
                        type="submit"
                        loading={loading}
                        disabled={!actionEnabled || !form.getValues('cluster')}
                        data-mp-event="Vercel Add Integration and Return to Vercel Button Clicked"
                      >
                        Add Integration and Return to Vercel
                      </Button>
                    </Grid.Col>
                  </Grid>
                </Box>
              </Form>
            </Box>
          </Flex>
        </Flex>
        <Footer />
      </Box>
    </PageShell>
  )
}

export default observer(AddIntegration)