"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TutorialCard = TutorialCard;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const index_1 = require("../index");
const consts_1 = require("./consts");
const tutorialStep_1 = require("./tutorialStep");
function TutorialCard({ actionLabel = 'Action', className, title, readMoreLink, steps: propsSteps = [], showSkipButton, onAction, onDismiss, onFinish, }) {
    var _a, _b;
    const [steps, setSteps] = (0, react_1.useState)([]);
    const [activeStep, setActiveStep] = (0, react_1.useState)(0);
    (0, react_1.useEffect)(() => {
        if (title && propsSteps.length) {
            const s = propsSteps.map((step, key) => ({ active: false, step, key }));
            const finalStep = {
                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 ((0, jsx_runtime_1.jsxs)(index_1.Card, { bg: consts_1.tutorialColors.bg, className: className, color: consts_1.tutorialColors.color, column: true, justifyContent: "space-between", minH: 400, p: 2, pt: 1, w: 580, children: [(0, jsx_runtime_1.jsxs)(index_1.Box, { alignContent: "center", alignItems: "center", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", minH: 48, row: true, style: { WebkitFlexGrow: '0' }, children: [(0, jsx_runtime_1.jsx)(index_1.H4, { color: consts_1.tutorialColors.color, children: title }), !isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "close", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "tertiaryLight" }))] }), (0, jsx_runtime_1.jsx)(index_1.Box, { flex: 5, row: true, children: (_a = steps === null || steps === void 0 ? void 0 : steps.map) === null || _a === void 0 ? void 0 : _a.call(steps, s => ((0, jsx_runtime_1.jsx)(tutorialStep_1.TutorialStep, { active: s.key === activeStep, content: s.step.content, readMoreLink: s.step.readMoreLink, title: s.step.title }, s.step.title))) }), (0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", mt: 0, children: [(0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", w: "-webkit-fill-available", children: [(0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "previous", color: consts_1.tutorialColors.buttonColor, disabled: isStartStep, icon: "falArrowLeft", onClick: () => setActiveStep(activeStep - 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" }), (0, jsx_runtime_1.jsx)(index_1.Box, { className: "vuiTutorialStepDots", children: (_b = steps === null || steps === void 0 ? void 0 : steps.map) === null || _b === void 0 ? void 0 : _b.call(steps, s => ((0, jsx_runtime_1.jsx)(index_1.Icon, { color: s.key === activeStep ? consts_1.tutorialColors.color : 'darkBlue.30', cursor: "pointer", hoverColor: consts_1.tutorialColors.buttonColor, name: "cusDotFull", onClick: () => setActiveStep(s.key) }, s.key))) }), (0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "next", color: consts_1.tutorialColors.buttonColor, disabled: isFinalStep, icon: "falArrowRight", onClick: () => setActiveStep(activeStep + 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" })] }), (showSkipButton || isFinalStep || !!onAction) && ((0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", children: [showSkipButton && !isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { mr: 2, onClick: onDismiss, variant: "primaryLight", children: "Skip" })), isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { mr: 2, onClick: onFinish, variant: "primaryLight", children: "Finish" })), !!onAction && ((0, jsx_runtime_1.jsx)(index_1.Button, { mr: 9, onClick: onAction, variant: "primaryLight", children: actionLabel }))] }))] })] }));
}
TutorialCard.displayName = 'TutorialCard';
//# sourceMappingURL=tutorialCard.js.map