import { ActionIcon, Button, Group, Typography } from '@tidbcloud/uikit'
import { IconArrowLeft, IconArrowRight } from '@tidbcloud/uikit/icons'
import React from 'react'

import { HelpCenterCardContent, HelpCenterCardFooter } from 'dbaas/screens/HelpCenter/CenterCard'

export interface StepProps {
  component: React.ReactElement
  onNext?: () => Promise<void>
}

export interface StepActionProps {
  value?: number
  disabledStart?: boolean
  disabledExit?: boolean
  steps: StepProps[]
  onFinish?: () => void
  onStart?: () => void
  onExit?: () => void
  onChange?: (step: number) => void
  endWithFooter?: boolean
}

const DEFAULT_STEP = 0

export const StepAction: React.FC<React.PropsWithChildren<StepActionProps>> = ({
  steps,
  onFinish,
  onExit,
  onStart,
  value,
  disabledStart,
  disabledExit,
  onChange,
  endWithFooter = true
}) => {
  const currentStep = value ?? DEFAULT_STEP

  const isEnd = currentStep === steps.length - 1
  const isInitial = currentStep === DEFAULT_STEP && !isEnd
  const isStarted = !isInitial && !isEnd

  const goNext = () => {
    onChange?.(currentStep + 1)
  }

  const goPrev = () => {
    onChange?.(currentStep - 1)
  }

  const handleStart = () => {
    onStart?.()
    goNext()
  }

  const handleNext = () => {
    steps[currentStep].onNext?.()
    goNext()
  }

  const handleFinish = () => {
    onFinish?.()
  }

  return (
    <>
      <HelpCenterCardContent>{steps[currentStep]?.component || ''}</HelpCenterCardContent>
      {isEnd && !endWithFooter ? undefined : (
        <HelpCenterCardFooter>
          <Group justify="space-between" h={'100%'}>
            {disabledExit ? (
              <div></div>
            ) : (
              <Button size="sm" variant="outline" py={8} onClick={onExit} data-mp-event="mp-exittutorial-1691461016627">
                Exit Tutorial
              </Button>
            )}
            <Group justify="flex-end" gap={0}>
              {!isInitial && (
                <>
                  <Typography variant="body-lg" mr={16}>
                    Step {currentStep} of {steps.length - 2}
                  </Typography>
                  <ActionIcon w={32} h={32} variant="default" mr={8} c="carbon.8" onClick={goPrev}>
                    <IconArrowLeft size={16} />
                  </ActionIcon>
                </>
              )}
              {isInitial && (
                <Button size="sm" onClick={handleStart} disabled={disabledStart} data-mp-event="mp-start-1691461016630">
                  Start
                </Button>
              )}
              {isStarted && (
                <Button
                  rightSection={<IconArrowRight size={16} />}
                  size="sm"
                  styles={{ section: { marginLeft: 4 } }}
                  onClick={handleNext}
                  data-mp-event="mp-next-1691461016632"
                >
                  Next
                </Button>
              )}
              {isEnd && (
                <Button size="sm" onClick={handleFinish} data-mp-event="mp-finish-1691461016633">
                  Finish
                </Button>
              )}
            </Group>
          </Group>
        </HelpCenterCardFooter>
      )}
    </>
  )
}