import React, { useEffect, useState } from 'react';
import { Button } from '../Button';
import { Fade } from '../Transition/Fade';
import { IconArrowLeft } from '../Icon/IconArrowLeft';
import { IconArrowRight } from '../Icon/IconArrowRight';
import { Modal } from '../Modal';
import { Video } from '../Video';

export interface ITourData {
  title: string;
  content: string;
  image?: string;
  video?: string;
}

export interface ITour {
  data: ITourData[];
  show: boolean;
  onHide(): void;
  onComplete?(): void;
}

export function Tour(props: ITour) {
  const { data, show, onComplete, onHide } = props;

  // #region state
  const [currentStepIndex, setCurrentStepIndex] = useState(0);
  const [step, setStep] = useState(data[0]);
  // #endregion state

  // #region functions
  const handlePrevClick = () => {
    if (currentStepIndex === 0) return;
    const prevStepIndex = currentStepIndex - 1;
    setStep(data[prevStepIndex]);
    setCurrentStepIndex(prevStepIndex);
  };

  const handleNextClick = () => {
    if (currentStepIndex === data?.length - 1) return;
    const nextStepIndex = currentStepIndex + 1;
    setStep(data[nextStepIndex]);
    setCurrentStepIndex(nextStepIndex);
  };

  const handleNavDotClick = (index: number) => {
    setStep(data[index]);
    setCurrentStepIndex(index);
  };

  const handleDoneClick = () => {
    onHide();
    onComplete && onComplete();
  };

  const prevButtonVisible = (currentStepIndex: number): boolean => {
    return currentStepIndex > 0;
  };

  const progressButtonsVisible = (data: ITourData[], currentStepIndex: number): boolean => {
    return currentStepIndex === data?.length - 1 || currentStepIndex < data?.length - 1;
  };

  const doneButtonVisible = (data: ITourData[], currentStepIndex: number): boolean => {
    return currentStepIndex === data?.length - 1;
  };

  const nextButtonVisible = (data: ITourData[], currentStepIndex: number): boolean => {
    return currentStepIndex < data?.length - 1;
  };
  // #endregion functions

  useEffect(() => {
    if (show) {
      setCurrentStepIndex(0);
      setStep(data[0]);
    }
  }, [show]);

  return (
    <Modal show={show} onHide={() => onHide()}>
      <Modal.Header>
        <Modal.Title>{step?.title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div className="b-tour-body">
          <div className={`b-tour-content ${!step?.video && !step.image ? 'no-media' : ''}`} dangerouslySetInnerHTML={{ __html: step?.content }}></div>
          {(step?.video || step.image) && (
            <div className="b-tour-media">
              {step?.video && <Video src={step?.video} />}
              {step?.image && <img src={step?.image} alt="Tour Image" />}
            </div>
          )}
        </div>
      </Modal.Body>
      <Modal.Footer className="d-flex justify-content-between">
        <Fade in={prevButtonVisible(currentStepIndex)}>
          <button onClick={handlePrevClick} className="b-tour-nav-button b-tour-nav-button-prev">
            <IconArrowLeft size="xl" />
          </button>
        </Fade>
        <nav>
          {data.map((item, index) => (
            <button key={index} className={`b-tour-nav-dot ${index === currentStepIndex ? 'active' : ''}`} type="button" onClick={() => handleNavDotClick(index)}></button>
          ))}
        </nav>
        <Fade in={progressButtonsVisible(data, currentStepIndex)}>
          {doneButtonVisible(data, currentStepIndex) && (
            <Button variant="light" onClick={handleDoneClick} className="b-tour-done-button">
              Done
            </Button>
          )}
          {nextButtonVisible(data, currentStepIndex) && (
            <button onClick={handleNextClick} className="b-tour-nav-button b-tour-nav-button-next">
              <IconArrowRight size="xl" />
            </button>
          )}
        </Fade>
      </Modal.Footer>
    </Modal>
  );
}