import { Box, Button, Center, Flex, Typography } from '@tidbcloud/uikit'
import { Form, FormCheckbox, FormTextareaInput } from '@tidbcloud/uikit/biz'
import { FormRatingInput } from '@tidbcloud/uikit/biz'
import { IconCheckVerified02 } from '@tidbcloud/uikit/icons'
import { useState } from 'react'

import { eventTracking } from 'dbaas/utils/tracking'

import { HelpCenterCard } from '../CenterCard'
import { CenterBreadcrumbs } from '../CenterRoute'
import { DEFAULT_HELP_PATH, useHelpCenterContext } from '../context'

export const RATING_BASE_PATH = `${DEFAULT_HELP_PATH}/Feedback`

interface RatingFormData {
  rating: number
  comments?: string
  allowed_contact?: boolean
}

export const RatingStarEntry = () => {
  const [step, setStep] = useState<'initial' | 'completed'>('initial')
  const { setCurrentPath } = useHelpCenterContext()

  const onSubmit = async (data: RatingFormData) => {
    eventTracking('Give us feedback Submitted', data)
    setStep('completed')
  }

  const goBack = () => {
    setCurrentPath(DEFAULT_HELP_PATH)
  }

  const Nav = (
    <CenterBreadcrumbs
      items={[
        { path: DEFAULT_HELP_PATH, title: 'Help' },
        { path: RATING_BASE_PATH, title: 'Feedback' }
      ]}
    />
  )

  return (
    <Box h="100%">
      {step === 'initial' && (
        <Form<RatingFormData> onSubmit={onSubmit} withActions={false} layout="none" h="100%">
          <Flex direction="column" h="100%">
            <HelpCenterCard.Header>{Nav}</HelpCenterCard.Header>
            <HelpCenterCard.Content>
              <Typography variant="headline-md" mt={24} mb={16}>
                Give us feedback
              </Typography>
              <FormRatingInput
                size="xl"
                name="rating"
                label="How satisfied are you with TiDB Cloud?"
                rules={{ required: 'Please fill.' }}
              />
              <FormTextareaInput
                name="comments"
                label={
                  <>
                    Any additional comments to help us improve TiDB Cloud?{' '}
                    <Typography display="inline" c="carbon.7">
                      (Optional)
                    </Typography>
                  </>
                }
                styles={{ input: { lineHeight: '20px' } }}
                mt={24}
                minRows={5}
                rules={{
                  maxLength: {
                    value: 1000,
                    message: 'The maximum number of characters is 1000.'
                  }
                }}
              />
              <FormCheckbox
                mt={24}
                size="sm"
                name="allowed_contact"
                styles={(theme) => ({ label: { color: theme.colors.carbon[8] } })}
                label="I allow TiDB product team to contact me for further feedback."
              />
            </HelpCenterCard.Content>
            <HelpCenterCard.Footer sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
              <Form.Actions
                h="100%"
                align="center"
                mt={0}
                onCancel={goBack}
                cancelProps={{ h: 32, py: 6, px: 12 }}
                confirmProps={{ h: 32, py: 6, px: 12 }}
                confirmText="Submit"
              ></Form.Actions>
            </HelpCenterCard.Footer>
          </Flex>
        </Form>
      )}
      {step === 'completed' && (
        <Flex direction="column" h="100%">
          <HelpCenterCard.Header>{Nav}</HelpCenterCard.Header>
          <Flex direction="column" justify="center" align="center" sx={{ flex: 1 }}>
            <Center
              sx={(theme) => ({
                color: theme.colors.green[7],
                backgroundColor: theme.colors.green[1],
                width: 48,
                height: 48,
                borderRadius: '100%'
              })}
            >
              <IconCheckVerified02 size={20} />
            </Center>
            <Typography mt={8} variant="headline-lg">
              Thank you!
            </Typography>
            <Typography variant="body-lg" mt={8}>
              We've received your feedback.
            </Typography>
            <Button
              variant="default"
              size="sm"
              px={12}
              mt={8}
              onClick={goBack}
              styles={(theme) => ({
                root: {
                  backgroundColor: theme.colors.carbon[2]
                }
              })}
              data-mp-event="mp-backtohelpcenter-1691461014526"
            >
              Back to help center
            </Button>
          </Flex>
        </Flex>
      )}
    </Box>
  )
}