import { Card, Typography, CardProps, Flex, Box } from '@tidbcloud/uikit'
import { Form } from '@tidbcloud/uikit/biz'
import { sha256 } from 'js-sha256'
import { Suspense, useState } from 'react'
import { Link, useHistory } from 'react-router-dom'

import { AcceptServices } from 'dbaas/screens/User/Common/AcceptServices'
import { EmailField, NameFields, PasswordField } from 'dbaas/screens/User/Common/FormFields'
import { registration } from 'dbaas/services/account'
import { CentralRegistrationReq } from 'dbaas/services/account/interface'
import { getSafeReturnTo } from 'dbaas/utils/returnTo'
import { eventTracking, getUTMSource, REGISTER_TYPES, reportGA } from 'dbaas/utils/tracking'
import { useGAPageView } from 'dbaas/utils/tracking/usePageViewTracking'

import { useIsMdScreen } from '../Components/helpers'
import { PageShell } from '../Components/Shell'
import { SSOLogin } from '../Components/SSO'

export const SignUp = () => {
  const [loading, setLoading] = useState(false)
  const history = useHistory()
  const params = new URLSearchParams(window.location.search)
  const returnTo = getSafeReturnTo(params.get('returnTo'))

  const isMd = useIsMdScreen()

  const cardProps: Omit<CardProps, 'children'> = isMd
    ? {
        p: 0,
        w: 360,
        withBorder: false,
        shadow: 'none'
      }
    : {
        p: 24,
        w: 440
      }

  const onSubmit = async (data: CentralRegistrationReq) => {
    if (loading) {
      return
    }
    setLoading(true)
    try {
      await registration({
        ...data,
        source: {
          ...getUTMSource(),
          signup_source: 'oauth'
        },
        return_url: returnTo ? encodeURIComponent(`/oauth/signin?returnTo=${encodeURIComponent(returnTo)}`) : undefined
      })
      eventTracking('SignUp Form Submission')
      reportGA({
        event: 'sign_up_complete',
        user_id: sha256(data.email),
        sign_up_method: 'form',
        register_type: REGISTER_TYPES.SIGNUP
      })
      history.push(
        `/oauth/verify/callback?status=verifying&email=${encodeURIComponent(
          data.email || ''
        )}&from=signup&usage=${params.get('usage')}${returnTo ? `&returnTo=${encodeURIComponent(returnTo)}` : ''}`
      )
    } finally {
      setLoading(false)
    }
  }

  useGAPageView()

  return (
    <Suspense fallback={<div />}>
      <PageShell>
        <Card {...cardProps}>
          <Flex justify="space-between" align="baseline" mb={16}>
            <Typography variant="headline-lg">Sign Up</Typography>
            <Typography variant="label-lg" c="carbon.7">
              Have an account?{' '}
              <Box
                component={Link}
                to={`/oauth/signin${window.location.search}`}
                sx={{ ':hover': { textDecoration: 'none' } }}
              >
                Sign In
              </Box>
            </Typography>
          </Flex>
          <SSOLogin action="sign-up" />
          <Form
            defaultValues={{
              email: '',
              password: '',
              company: '',
              country: '',
              phone_number: '',
              accept_service: false
            }}
            onSubmit={onSubmit}
            layoutProps={{
              gap: 0
            }}
            actionsProps={{
              mt: 16,
              cancelProps: { display: 'none' },
              confirmText: 'Sign Up',
              confirmProps: { w: '100%' }
            }}
          >
            <NameFields labeled={false} required={true} />
            <EmailField labeled={false} />
            <PasswordField />
            <AcceptServices />
          </Form>
        </Card>
      </PageShell>
    </Suspense>
  )
}

export default SignUp