import { Button, Group, Modal } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { useMemoizedFn } from 'ahooks'
import { cloneElement, useState } from 'react'

import { APIKeyItem } from '../helpers'
import { mpEvents } from '../tracker'

import { CreationForm, ProjectCreationForm } from './CreationForm'
import Result from './Result'

enum CreationStep {
  Add = 1,
  Result = 2
}

interface CreationContentProps {
  onFinish?: () => unknown
  onCancel: () => void
}

const CreationContent: React.FC<React.PropsWithChildren<CreationContentProps>> = ({ onFinish, onCancel }) => {
  const [step, setStep] = useState(CreationStep.Add)
  const [result, setResult] = useState<APIKeyItem>()
  const onCreate = useMemoizedFn((result: APIKeyItem) => {
    setResult(result)
    setStep(CreationStep.Result)

    onFinish?.()
  })

  if (step === CreationStep.Add) {
    return <CreationForm onFinish={onCreate} onCancel={onCancel} />
  }

  return (
    <>
      <Result data={result} />
      <Group justify="flex-end" mt={16}>
        <Button variant="default" onClick={onCancel} data-mp-event={mpEvents.finishCreation}>
          Done
        </Button>
      </Group>
    </>
  )
}

interface CreationModalProps extends Pick<CreationContentProps, 'onFinish'> {
  trigger: React.ReactElement
}

export const CreationModal: React.FC<React.PropsWithChildren<CreationModalProps>> = ({ trigger, onFinish }) => {
  const [visible, { open, close }] = useDisclosure(false)

  const modalTrigger = cloneElement(trigger, {
    onClick: () => {
      if (trigger.props.onClick) {
        trigger.props.onClick()
      }

      open()
    }
  })

  return (
    <>
      {modalTrigger}
      <Modal title="Create API Key" centered size="lg" opened={visible} onClose={close}>
        <CreationContent onFinish={onFinish} onCancel={close} />
      </Modal>
    </>
  )
}

export const ProjectAPIKeyCreationModal: React.FC<
  React.PropsWithChildren<CreationModalProps & { projectName: string; projectId: string; onCancel?: () => void }>
> = ({ trigger, onFinish, projectName, projectId }) => {
  const modalTrigger = cloneElement(trigger, {
    onClick: () => {
      if (trigger.props.onClick) {
        trigger.props.onClick()
      }

      open()
    }
  })

  const [step, setStep] = useState(CreationStep.Add)
  const [result, setResult] = useState<APIKeyItem>()
  const [visible, { open, close }] = useDisclosure(false, {
    onClose: () => {
      setStep(CreationStep.Add)
      setResult(undefined)
    }
  })
  const onCreate = useMemoizedFn((result: APIKeyItem) => {
    setResult(result)
    setStep(CreationStep.Result)

    onFinish?.()
  })

  return (
    <>
      {modalTrigger}
      <Modal title={`Create API Key for ${projectName}`} centered size="lg" opened={visible} onClose={close}>
        {step === CreationStep.Add ? (
          <ProjectCreationForm onFinish={onCreate} onCancel={close} projectId={projectId} />
        ) : (
          <>
            <Result data={result} />
            <Group justify="flex-end" mt={16}>
              <Button variant="default" onClick={close} data-mp-event={mpEvents.finishCreation}>
                Done
              </Button>
            </Group>
          </>
        )}
      </Modal>
    </>
  )
}