import { Button, Checkbox, Divider, Group, Paper, Stack, Typography } from '@tidbcloud/uikit'
import { IconCheck } from '@tidbcloud/uikit/icons'
import { useState } from 'react'

import { MixpanelEvents } from 'dbaas/utils/tracking/event'

interface UnderstandStepProps {
  onCancel: () => void
  onNext: () => void
}

export const UnderstandStep = ({ onCancel, onNext }: UnderstandStepProps) => {
  const [acknowledged, setAcknowledged] = useState(false)

  return (
    <Paper withBorder data-testid="project-migration-understand-step">
      <Stack gap="xl" p="xl">
        <Stack gap="sm">
          <Typography variant="headline-sm">Why this migration is needed</Typography>

          <Stack gap={8}>
            {[
              'More flexibility: Move instances between projects more easily.',
              'Better separation: Dedicated clusters stay in their current projects.',
              'No extra cost: This migration does not incur additional charges.'
            ].map((reason) => (
              <Group key={reason} gap={8} wrap="nowrap">
                <IconCheck size={16} c="green.7" />
                <Typography variant="body-lg" c="carbon.7">
                  {reason}
                </Typography>
              </Group>
            ))}
          </Stack>
        </Stack>

        <Stack gap="sm">
          <Typography variant="headline-sm">What will happen</Typography>
          <Typography variant="body-lg" c="carbon.7">
            Starter and Essential instances included in this task will be moved to new projects. Dedicated clusters will
            stay in their current projects.
          </Typography>
        </Stack>

        <Checkbox
          size="sm"
          checked={acknowledged}
          label="I understand that new projects will be created, project IDs will change, and existing project RBAC will be copied to the new projects."
          onChange={(event) => {
            setAcknowledged(event.currentTarget.checked)
          }}
          data-testid="project-migration-understand-checkbox"
        />
      </Stack>
      <Divider />
      <Group justify="flex-end" px="xl" py="md">
        <Button
          variant="default"
          onClick={onCancel}
          data-testid="project-migration-do-it-later-button"
          data-mp-event={MixpanelEvents.ProjectMigration.View.CancelClicked}
        >
          Do it later
        </Button>
        <Button
          onClick={onNext}
          disabled={!acknowledged}
          data-testid="project-migration-next-button"
          data-mp-event={MixpanelEvents.ProjectMigration.View.SubmitClicked}
        >
          Next
        </Button>
      </Group>
    </Paper>
  )
}