import { Box, Button, Group, Modal, Typography } 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 TurnToPrivatePreviewModalProps {
  opened: boolean
  onClose: () => void
  onConfirm: (data: UIModeFormData) => void
  isPending: boolean
}

export const TurnToPrivatePreviewModal = ({
  opened,
  onClose,
  onConfirm,
  isPending
}: TurnToPrivatePreviewModalProps) => {
  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(70.88deg, rgba(229, 111, 152, 0.3) 9.5%, rgba(165, 120, 237, 0.3) 39.18%, rgba(50, 184, 251, 0.3) 77.16%, rgba(79, 241, 179, 0.3) 91.8%)'
        }}
      ></Box>
      <Form<UIModeFormData>
        onSubmit={onConfirm}
        layout="none"
        withActions={false}
        defaultValues={{ hideForAWeek: false }}
      >
        <Typography variant="title-lg" fw={700} mt={24}>
          Switch to Private Preview
        </Typography>
        <Typography variant="body-lg" mt={16}>
          You're switching to the Private Preview console, available by invitation only. In this environment, you can
          manage Premium/BYOC plans exclusively. Other plan types are not available there.
        </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.Classic}
            data-mp-target-product-mode={NextGenModes.NewOfferingsPreview}
          >
            Cancel
          </Button>
          <Button
            loading={isPending}
            type="submit"
            data-mp-event={MixpanelEvents.TidbCloudProductMode.Update.SubmitClicked}
            data-mp-current-product-mode={NextGenModes.Classic}
            data-mp-target-product-mode={NextGenModes.NewOfferingsPreview}
          >
            Switch
          </Button>
        </Group>
      </Form>
    </Modal>
  )
}