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