import { useEffect, useState } from 'react'

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

export function TutorialCard({
  actionLabel = 'Action',
  className,
  title,
  readMoreLink,
  steps: propsSteps = [],
  showSkipButton,
  onAction,
  onDismiss,
  onFinish,
}: 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

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

  const isStartStep = activeStep === 0
  const isFinalStep = activeStep === propsSteps.length

  return (
    <Card
      bg={tutorialColors.bg}
      className={className}
      color={tutorialColors.color}
      column
      justifyContent="space-between"
      minH={400}
      p={2}
      pt={1}
      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}>{title}</H4>
        {!isFinalStep && (
          <Button aria-label="close" icon="falTimes" 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}
          />
        ))}
      </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="falArrowLeft"
            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="cusDotFull"
                onClick={() => setActiveStep(s.key)}
              />
            ))}
          </Box>
          <Button
            aria-label="next"
            color={tutorialColors.buttonColor}
            disabled={isFinalStep}
            icon="falArrowRight"
            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 mr={2} onClick={onDismiss} variant="primaryLight">
                Skip
              </Button>
            )}
            {isFinalStep && (
              <Button mr={2} onClick={onFinish} variant="primaryLight">
                Finish
              </Button>
            )}
            {!!onAction && (
              <Button mr={9} onClick={onAction} variant="primaryLight">
                {actionLabel}
              </Button>
            )}
          </Box>
        )}
      </Box>
    </Card>
  )
}

TutorialCard.displayName = 'TutorialCard'
