import React, { useState, useEffect, useMemo, useRef } from 'react';
import classNames from 'classnames';
import { createPortal } from 'react-dom';
import Tour from './tour';
import { AdvancedTour, AdvancedTourAnchor } from './advanced-tour';
import { getTourDataById } from './helpers';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const defaultState = {
  stepId: 0,
  advancedTourStepId: 0,
  showTour: false,
  advancedTourEnabled: false,
  setShowTour: () => {},
  setStepId: () => {},
  setStep: () => {},
  setTourId: () => {},
  setAdvancedTourEnabled: () => {},
  setAdvancedTourStepId: () => {},
  setAdvancedTourId: () => {},
  setShowAdvancedTour: () => {},
  setIsHighlighted: () => {}
};
export const TourContext = /*#__PURE__*/React.createContext(defaultState);
export const TourContextProvider = ({
  children,
  toursSettings,
  a11yProps
}) => {
  const {
    t
  } = useTranslation();
  const a11yPropsWithDefault = a11yProps ?? {
    tourAnchorButtonAriaLabel: t('Advanced tour anchor button'),
    nextTourButtonAriaLabel: t('Next tour page'),
    previousTourButtonAriaLabel: t('Previous tour page')
  };
  const [stepId, setStepId] = useState(0);
  const [showTour, setShowTour] = useState(true);
  const [step, setStep] = useState();
  const [tourId, setTourId] = useState('');
  const [advancedTourId, setAdvancedTourId] = useState('');
  const [advancedTourStep, setAdvancedTourStep] = useState();
  const [advancedTourStepId, setAdvancedTourStepId] = useState(0);
  const [showAdvancedTour, setShowAdvancedTour] = useState(false);
  const [advancedTourEnabled, setAdvancedTourEnabled] = useState(false);
  const [isHighlighted, setIsHighlighted] = useState(false);
  const advancedTourAnchor = useRef(null);
  const {
    tour: {
      steps,
      onCompleteHandler,
      onSkipHandler
    },
    advancedTour: {
      steps: advancedSteps,
      onSkipHandler: onAdvancedSkipHandler,
      tourClassName
    }
  } = getTourDataById(tourId, advancedTourId, toursSettings);
  useEffect(() => {
    setStep(steps[stepId]);
    setAdvancedTourStep(advancedSteps[advancedTourStepId]);
  }, [steps, stepId, advancedTourStepId, advancedSteps]);
  const value = useMemo(() => ({
    stepId,
    advancedSteps,
    showTour,
    setShowTour,
    setStep,
    setStepId,
    setTourId,
    advancedTourEnabled,
    showAdvancedTour,
    advancedTourStepId,
    setAdvancedTourEnabled,
    setAdvancedTourStepId,
    setAdvancedTourId,
    setShowAdvancedTour,
    isHighlighted,
    setIsHighlighted
  }), [stepId, showTour, tourId, advancedTourStepId, advancedTourId, advancedTourEnabled]);
  return /*#__PURE__*/_jsxs(TourContext.Provider, {
    value: value,
    children: [children, /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(AdvancedTourAnchor, {
      ref: advancedTourAnchor,
      onClickHandler: () => setShowAdvancedTour(!showAdvancedTour),
      isVisible: advancedTourEnabled,
      isHighlighted: isHighlighted,
      placement: advancedSteps[advancedTourStepId]?.placement,
      ariaLabel: a11yPropsWithDefault.tourAnchorButtonAriaLabel
    }), document.body), advancedTourStep && advancedTourEnabled && showAdvancedTour && /*#__PURE__*/_jsx(AdvancedTour, {
      step: advancedTourStep,
      stepNumber: advancedTourStepId + 1,
      totalSteps: advancedSteps?.length,
      setNextStep: () => setAdvancedTourStepId(advancedTourStepId + 1),
      setPrevStep: () => setAdvancedTourStepId(advancedTourStepId - 1),
      onSkipHandler: () => {
        setIsHighlighted(false);
        setShowAdvancedTour(false);
        onAdvancedSkipHandler(advancedTourStepId);
      },
      anchorRef: advancedTourAnchor.current,
      showTour: showAdvancedTour,
      className: classNames(tourClassName, 'usecase-overview-tour'),
      a11yProps: a11yPropsWithDefault
    }), step && showTour && /*#__PURE__*/_jsx(Tour, {
      step: step,
      stepNumber: stepId + 1,
      totalSteps: steps?.length,
      setNextStep: () => setStepId(stepId + 1),
      setPrevStep: () => setStepId(stepId - 1),
      onCompleteHandler: () => {
        setShowTour(false);
        onCompleteHandler();
      },
      onSkipHandler: stepNumber => {
        setShowTour(false);
        onSkipHandler(stepNumber);
      },
      showTour: showTour,
      className: "usecase-overview-tour"
    })]
  });
};