import { useEffect, useState } from 'react'

import { Box, Button, Card, H4, Icon } from '../index'
import { tutorialColors } from './consts'
import type { TutorialCardProps, TutorialDataStep, TutorialStepWrapper } from './tutorial.types'
import { TutorialStep } from './tutorialStep'

export function TutorialCard({
  actionLabel = 'Action',
  className,
  title,
  readMoreLink,
  steps: propsSteps = [],
  showSkipButton,
  onAction,
  onDismiss,
  onFinish,
  includeFinalPage,
  useContentTitle,
}: TutorialCardProps) {
  const [steps, setSteps] = useState<TutorialStepWrapper[]>([])
  const [activeStep, setActiveStep] = useState<number>(0)

  useEffect(() => {
    if (title && propsSteps.length) {
      const s = propsSteps.map((step, key) => ({ active: false, step, key }))

      const finalStep: TutorialDataStep = {
        title: `Completed!`,
        content: `${readMoreLink ? 'To learn more, please visit:' : 'Thank you!'}`,
      }

      if (readMoreLink) finalStep.readMoreLink = readMoreLink

      includeFinalPage ? setSteps([...s, { step: finalStep, key: propsSteps.length }]) : setSteps([...s])
    }
  }, [title, propsSteps])

  const isStartStep = activeStep === 0
  const isFinalStep = includeFinalPage ? activeStep === propsSteps.length : activeStep === propsSteps.length - 1

  return (
    <Card
      bg={tutorialColors.bg}
      className={className}
      color={tutorialColors.color}
      column
      justifyContent="space-between"
      minH={400}
      px={3}
      py={2}
      w={580}
    >
      <Box
        alignContent="center"
        alignItems="center"
        flex={0}
        flexDirection="row"
        flexGrow={0}
        justifyContent="space-between"
        minH={48}
        row
        style={{ WebkitFlexGrow: '0' }}
      >
        <H4 color={tutorialColors.color}>{useContentTitle ? steps[activeStep]?.step?.title : title}</H4>
        {!isFinalStep && (
          <Button aria-label="close" icon="uiTimes" onClick={onDismiss} scale={2} variant="tertiaryLight" />
        )}
      </Box>
      <Box flex={5} row>
        {steps?.map?.(s => (
          <TutorialStep
            active={s.key === activeStep}
            content={s.step.content}
            key={s.step.title}
            readMoreLink={s.step.readMoreLink}
            title={s.step.title}
            useContentTitle={useContentTitle}
          />
        ))}
      </Box>
      <Box alignItems="center" justifyContent="space-between" mt={0}>
        <Box alignItems="center" justifyContent="space-between" w="-webkit-fill-available">
          <Button
            aria-label="previous"
            color={tutorialColors.buttonColor}
            disabled={isStartStep}
            icon="uiArrowLeft"
            onClick={() => setActiveStep(activeStep - 1)}
            scale={2}
            transition="none"
            variant="tertiaryLight"
            w="34"
          />
          <Box className="vuiTutorialStepDots">
            {steps?.map?.(s => (
              <Icon
                color={s.key === activeStep ? tutorialColors.color : 'darkBlue.30'}
                cursor="pointer"
                hoverColor={tutorialColors.buttonColor}
                key={s.key}
                name="uiDotFull"
                onClick={() => setActiveStep(s.key)}
              />
            ))}
          </Box>
          <Button
            aria-label="next"
            color={tutorialColors.buttonColor}
            disabled={isFinalStep}
            icon="uiArrowRight"
            onClick={() => setActiveStep(activeStep + 1)}
            scale={2}
            transition="none"
            variant="tertiaryLight"
            w="34"
          />
        </Box>
        {(showSkipButton || isFinalStep || !!onAction) && (
          <Box alignItems="center" justifyContent="space-between">
            {showSkipButton && !isFinalStep && (
              <Button mx={1} onClick={onDismiss} variant="secondaryLight">
                Skip
              </Button>
            )}
            {isFinalStep && (
              <Button mx={1} onClick={onFinish} variant="primaryLight">
                I got it
              </Button>
            )}
            {!!onAction && (
              <Button ml={1} mr={showSkipButton || isFinalStep ? 12 : 2} onClick={onAction} variant="primaryLight">
                {actionLabel}
              </Button>
            )}
          </Box>
        )}
      </Box>
    </Card>
  )
}

TutorialCard.displayName = 'TutorialCard'
