import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { forwardRef, useCallback, useMemo, useState } from 'react';
import Box from '../Box';
import Button from '../Button';
import Card from '../Card';
import CardActions from '../CardActions';
import CardContent from '../CardContent';
import CardHeader from '../CardHeader';
import LinearProgress from '../LinearProgress';
import TransitionStepper from '../TransitionStepper';
import Typography from '../Typography';

/**
 * The Wizard lets you create a step-by-step wizard with a progress bar.
 *
 * Demos:
 *
 * - [Wizard (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/patterns-wizard)
 *
 * API:
 *
 * - inherits [Box API](https://mui.com/material-ui/api/box/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
 * - ✅ `component` prop is supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @template C - The type of the component.
 * @param props - The props for the Wizard component.
 * @param ref - The ref to be forwarded to the Box component.
 * @returns The rendered Wizard component.
 */
const Wizard = forwardRef(({ allowBackwardNavigation = true, allowCancel = false, animateOnSlide, className, title, subtitle, nextButtonText = 'Next', previousButtonText = 'Previous', cancelButtonText = 'Cancel', onCancelButtonClick, onNextButtonClick, onPreviousButtonClick, onFinishButtonClick, finishButtonText = 'Finish', steps, }, ref) => {
    const [currentStep, setCurrentStep] = useState(0);
    const isLastStep = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]);
    const isFirstStep = useMemo(() => currentStep === 0, [currentStep]);
    const displayCurrentStep = useMemo(() => currentStep + 1, [currentStep]);
    const handleNextButtonClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        if (isLastStep) {
            if (onFinishButtonClick && onFinishButtonClick instanceof Function) {
                yield onFinishButtonClick();
            }
            return;
        }
        if (onNextButtonClick && onNextButtonClick instanceof Function) {
            yield onNextButtonClick();
        }
        setCurrentStep((step) => step + 1);
    }), [isLastStep, onFinishButtonClick, onNextButtonClick]);
    const handlePreviousButtonClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        if (isFirstStep) {
            return;
        }
        if (onPreviousButtonClick && onPreviousButtonClick instanceof Function) {
            yield onPreviousButtonClick();
        }
        setCurrentStep((step) => step - 1);
    }), [isFirstStep, onPreviousButtonClick]);
    return (_jsxs(Box, Object.assign({ ref: ref, className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-wizard', 'OxygenWizard-root', className) }, { children: [_jsxs(Card, Object.assign({ elevation: 1, className: "OxygenWizard-card oxygen-wizard-card" }, { children: [_jsx(CardHeader, { title: title, subheader: subtitle }), _jsx(CardContent, Object.assign({ className: "OxygenWizard-cardContent oxygen-wizard-card-content" }, { children: _jsx(TransitionStepper, { animateOnSlide: animateOnSlide, currentStep: currentStep, steps: steps }) })), _jsxs(CardActions, Object.assign({ className: "OxygenWizard-actions oxygen-wizard-actions" }, { children: [_jsx(Box, { children: allowBackwardNavigation && !isFirstStep && (_jsx(Button, Object.assign({ color: "secondary", onClick: handlePreviousButtonClick }, { children: previousButtonText }))) }), _jsxs(Box, Object.assign({ className: "OxygenWizard-actionRightAligned oxygen-wizard-right-aligned-buttons" }, { children: [allowCancel && (_jsx(Button, Object.assign({ variant: "contained", color: "secondary", onClick: onCancelButtonClick }, { children: cancelButtonText }))), _jsx(Button, Object.assign({ variant: "contained", color: "primary", onClick: handleNextButtonClick }, { children: isLastStep ? finishButtonText : nextButtonText }))] }))] }))] })), _jsxs(Box, Object.assign({ className: "OxygenWizard-progressContainer oxygen-wizard-progress-container" }, { children: [_jsx(Typography, { children: `${displayCurrentStep}/${steps.length}` }), _jsx(Box, Object.assign({ className: "OxygenWizard-progressBarContainer oxygen-wizard-progress-bar-container" }, { children: _jsx(LinearProgress, { className: "OxygenWizard-progressBar oxygen-wizard-progress-bar", variant: "determinate", value: (displayCurrentStep / steps.length) * 100, "aria-label": "Wizard Progress Bar" }) }))] }))] })));
});
export default Wizard;
function addCSS(css){var head = document.getElementsByTagName('head')[0];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.oxygen-wizard .oxygen-wizard-card {\n  margin-bottom: var(--oxygen-customComponents-Stepper-properties-action-margin-bottom);\n}\n.oxygen-wizard .oxygen-wizard-actions {\n  justify-content: space-between;\n}\n.oxygen-wizard .oxygen-wizard-progress-container {\n  width: 40%;\n  margin: auto;\n  display: flex;\n  gap: var(--oxygen-customComponents-Stepper-properties-progress-gap);\n}\n.oxygen-wizard .oxygen-wizard-progress-container .oxygen-wizard-progress-bar-container {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.oxygen-wizard .oxygen-wizard-progress-container .oxygen-wizard-progress-bar-container .oxygen-wizard-progress-bar {\n  width: 100%;\n}\n.oxygen-wizard .oxygen-wizard-right-aligned-buttons {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--oxygen-customComponents-Stepper-properties-right-button-gap);\n}");