import { Button, Group, Modal, Typography, Box } from '@tidbcloud/uikit'
import { Form } from '@tidbcloud/uikit/biz'

import { NextGenModes } from 'dbaas/features/Organization/mode'
import { MixpanelEvents } from 'dbaas/utils/tracking'

import { DismissNotice, UIModeFormData } from './Dismiss'

interface TurnToClassicModalProps {
  opened: boolean
  onClose: () => void
  onConfirm: (data: UIModeFormData) => void
  isPending: boolean
}

export const TurnToClassicModal = ({ opened, onClose, onConfirm, isPending }: TurnToClassicModalProps) => {
  return (
    <Modal
      centered
      size={480}
      trapFocus={false}
      styles={{ header: { display: 'none' } }}
      opened={opened}
      withCloseButton={false}
      onClose={onClose}
    >
      <Box
        sx={{
          height: 12,
          borderRadius: 8,
          background:
            'linear-gradient(71.13deg, rgba(171, 171, 171, 0.3) 13.66%, rgba(107, 107, 107, 0.3) 39.02%, rgba(145, 145, 145, 0.3) 72.18%, rgba(63, 63, 63, 0.3) 95.35%)'
        }}
      ></Box>
      <Form<UIModeFormData>
        onSubmit={onConfirm}
        layout="none"
        withActions={false}
        defaultValues={{ hideForAWeek: false }}
      >
        <Typography variant="title-lg" fw={700} mt={24}>
          Switch to TiDB Cloud
        </Typography>
        <Typography variant="body-lg" mt={16}>
          You're switching back to TiDB Cloud console, where you can manage Starter, Essential, and Dedicated plans.
          Other plans are not available in this environment.
        </Typography>
        <DismissNotice />
        <Group justify="flex-end" mt="xl">
          <Button
            variant="default"
            onClick={onClose}
            data-mp-event={MixpanelEvents.TidbCloudProductMode.Update.CancelClicked}
            data-mp-current-product-mode={NextGenModes.NewOfferingsPreview}
            data-mp-target-product-mode={NextGenModes.Classic}
          >
            Cancel
          </Button>
          <Button
            loading={isPending}
            type="submit"
            data-mp-event={MixpanelEvents.TidbCloudProductMode.Update.SubmitClicked}
            data-mp-current-product-mode={NextGenModes.NewOfferingsPreview}
            data-mp-target-product-mode={NextGenModes.Classic}
          >
            Switch
          </Button>
        </Group>
      </Form>
    </Modal>
  )
}