"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tutorial = Tutorial;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("@tippyjs/react"));
const utils_1 = require("../utils");
const tutorialCard_1 = require("./tutorialCard");
const useTutorial_1 = require("./useTutorial");
/** Popover Tutorial is used to display information about a new, or existing feature. */
function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, id, placement = 'right', showSkipButton, }) {
    const { isVisible, setIsVisible, saveDisplayed } = (0, useTutorial_1.useTutorial)(id);
    const onClose = (e) => {
        setIsVisible(false);
        if (e === 'dismissed')
            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
        if (e === 'finished')
            onFinish === null || onFinish === void 0 ? void 0 : onFinish();
        saveDisplayed(e);
    };
    return ((0, jsx_runtime_1.jsx)(react_1.default, { content: (0, jsx_runtime_1.jsx)(tutorialCard_1.TutorialCard, { actionLabel: actionLabel, className: (0, utils_1.cs)('vui-tutorial', className), onAction: onAction, onDismiss: () => onClose('dismissed'), onFinish: () => onClose('finished'), showSkipButton: showSkipButton, steps: steps, title: title }), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
            modifiers: [
                {
                    name: 'flip',
                    enabled: false,
                },
            ],
        }, visible: isVisible, children: children }));
}
Tutorial.displayName = 'Tutorial';
//# sourceMappingURL=tutorial.js.map