import React, { useRef } from 'react';
import classNames from 'classnames';
import { FLIP_MODIFIER, OFFSET_MODIFIER, Popper, POPPER_PLACEMENTS_TYPES, POPPER_STRATEGY_OPTIONS } from '../../react-popper';
import { AdvancedTourFooter } from './components/advanced-tour-footer';
import { ANCHOR_PLACEMENT } from './components/advanced-tour-anchor';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Component to demonstrate advanced tour information.
 * Is attached to a specific component on the page in the corner.
 * @uxr-only-supported
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
const AdvancedTour = ({
  step,
  setNextStep,
  setPrevStep,
  showTour,
  onSkipHandler,
  stepNumber = 0,
  totalSteps = 0,
  className = '',
  anchorRef,
  a11yProps
}) => {
  const ref = useRef(null);
  const {
    content,
    headerIcon,
    headerText,
    headerIconClassName,
    headerTextClassName,
    okayButtonClassName,
    okayButtonText,
    placement
  } = step;
  return /*#__PURE__*/_jsx(Popper, {
    open: showTour,
    rootEl: ref,
    placement: placement === ANCHOR_PLACEMENT.LEFT ? POPPER_PLACEMENTS_TYPES.TOP_START : POPPER_PLACEMENTS_TYPES.TOP_END,
    anchorEl: anchorRef,
    strategy: POPPER_STRATEGY_OPTIONS.FIXED,
    popperModifiers: [OFFSET_MODIFIER, FLIP_MODIFIER],
    children: () => /*#__PURE__*/_jsxs("div", {
      className: classNames('advanced-tour-container popout-transition', className),
      ref: ref,
      "test-id": "advanced-tour-container",
      children: [/*#__PURE__*/_jsxs("header", {
        className: "advanced-tour-header",
        children: [headerIcon && /*#__PURE__*/_jsx("div", {
          className: classNames('advanced-tour-header-icon', headerIconClassName),
          children: headerIcon
        }), /*#__PURE__*/_jsx("p", {
          className: classNames('advanced-tour-header-text', headerTextClassName),
          "test-id": "advanced-tour-header-text",
          children: headerText
        })]
      }), /*#__PURE__*/_jsx("div", {
        className: "advanced-tour-content",
        "test-id": "advanced-tour-content",
        children: typeof content === 'string' ? /*#__PURE__*/_jsx("p", {
          children: content
        }) : content
      }), /*#__PURE__*/_jsx(AdvancedTourFooter, {
        stepNumber: stepNumber,
        totalSteps: totalSteps,
        onNextHandler: setNextStep,
        onPrevHandler: setPrevStep,
        onSkipHandler: onSkipHandler,
        okayButtonText: okayButtonText,
        okayButtonClassName: okayButtonClassName,
        nextTourButtonAriaLabel: a11yProps.nextTourButtonAriaLabel,
        previousTourButtonAriaLabel: a11yProps.previousTourButtonAriaLabel
      }), /*#__PURE__*/_jsx("div", {
        "data-popper-arrow": ""
      })]
    })
  });
};
export default AdvancedTour;