"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXStep = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const solid_1 = require("@heroicons/react/24/solid");
const Card_1 = require("../Card");
const PHXStep = ({ className, steps, nextLabel, backLabel, formMode, onSubmit, triggerStep, }) => {
    var _a, _b;
    const [currentStep, setCurrentStep] = (0, react_1.useState)(1);
    const [listSteps, setListSteps] = (0, react_1.useState)([]);
    const handleClickToStep = (stepItem) => {
        var _a, _b;
        const isNextStep = ((_a = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find((itemChild) => itemChild.step === currentStep)) === null || _a === void 0 ? void 0 : _a.isPass) ||
            ((_b = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find((itemChild) => itemChild.step === stepItem.step)) === null || _b === void 0 ? void 0 : _b.isPass);
        if (!isNextStep)
            return;
        if (stepItem.step > currentStep) {
            handleNextStep();
        }
        else {
            handleBackStep(stepItem);
        }
    };
    const handleBackStep = (stepItem) => {
        var _a;
        const funcCallBackStep = (_a = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find((func) => func.step === currentStep)) === null || _a === void 0 ? void 0 : _a.onBack;
        if (funcCallBackStep && formMode !== 'readOnly')
            funcCallBackStep();
        if (stepItem && stepItem.step) {
            setCurrentStep(stepItem.step);
        }
        else {
            setCurrentStep((currentStep) => currentStep - 1);
        }
    };
    const handleNextStep = () => {
        var _a;
        const funcCallNextStep = (_a = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find((func) => func.step === currentStep)) === null || _a === void 0 ? void 0 : _a.onNext;
        if (funcCallNextStep && formMode !== 'readOnly')
            funcCallNextStep();
        if (currentStep === (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length)) {
            onSubmit();
            return;
        }
        else {
            listSteps === null || listSteps === void 0 ? void 0 : listSteps.forEach((item) => {
                if (item.step === currentStep + 1 && item.status !== 'complete')
                    item.status = 'current';
                if (item.step === currentStep)
                    item.status = 'complete';
            });
        }
        setCurrentStep((currentStep) => currentStep + 1);
    };
    (0, react_1.useEffect)(() => {
        if (steps) {
            let listNew = steps === null || steps === void 0 ? void 0 : steps.map((item, index) => {
                if (index === 0) {
                    return {
                        ...item,
                        status: 'current',
                    };
                }
                else {
                    return {
                        ...item,
                        status: 'upcoming',
                    };
                }
            });
            if (formMode !== 'addNew')
                listNew = steps === null || steps === void 0 ? void 0 : steps.map((item) => ({ ...item, status: 'complete' }));
            setListSteps(listNew);
        }
    }, []);
    return (react_1.default.createElement("div", { className: className },
        react_1.default.createElement(Card_1.PHXCard, { primaryFooterAction: {
                content: currentStep === (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length) ? (formMode !== 'readOnly' ? 'Submit' : '') : nextLabel,
                submit: false,
                onClick: handleNextStep,
                disabled: ((_a = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find((stepChild) => stepChild.step === currentStep)) === null || _a === void 0 ? void 0 : _a.isPass) === false,
            }, secondaryFooterActions: [{ content: currentStep !== 1 ? backLabel : '', onClick: handleBackStep }] },
            react_1.default.createElement("nav", { "aria-label": 'Progress' },
                react_1.default.createElement("ol", { role: 'list', className: 'divide-y divide-gray-300 rounded-md border border-gray-300 md:flex md:divide-y-0' }, listSteps &&
                    listSteps.map((stepItem, stepIdx) => (react_1.default.createElement("li", { key: stepIdx, className: 'relative cursor-pointer md:flex md:flex-1' },
                        react_1.default.createElement("button", { type: 'button', onClick: () => handleClickToStep(stepItem) },
                            stepItem.status === 'complete' ? (react_1.default.createElement("div", { className: 'group flex w-full items-center' },
                                react_1.default.createElement("span", { className: 'flex items-center px-6 py-3 text-sm font-medium' },
                                    react_1.default.createElement("span", { className: 'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800' },
                                        react_1.default.createElement(solid_1.CheckIcon, { className: 'h-6 w-6 text-white', "aria-hidden": 'true' })),
                                    react_1.default.createElement("span", { className: 'ml-4 text-sm font-medium text-gray-900' }, stepItem.title)))) : stepItem.status === 'current' ? (react_1.default.createElement("div", { className: 'flex items-center px-6 py-3 text-sm font-medium', "aria-current": 'step' },
                                react_1.default.createElement("span", { className: 'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-indigo-600' },
                                    react_1.default.createElement("span", { className: 'text-indigo-600' }, stepItem.step)),
                                react_1.default.createElement("span", { className: 'ml-4 text-sm font-medium text-indigo-600' }, stepItem.title))) : (react_1.default.createElement("div", { className: 'group flex items-center' },
                                react_1.default.createElement("span", { className: 'flex items-center px-6 py-3 text-sm font-medium' },
                                    react_1.default.createElement("span", { className: 'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400' },
                                        react_1.default.createElement("span", { className: 'text-gray-500 group-hover:text-gray-900' }, stepItem.step)),
                                    react_1.default.createElement("span", { className: 'ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900' }, stepItem.title)))),
                            stepIdx !== (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length) - 1 ? (react_1.default.createElement(react_1.default.Fragment, null,
                                react_1.default.createElement("div", { className: 'absolute right-0 top-0 hidden h-full w-5 md:block', "aria-hidden": 'true' },
                                    react_1.default.createElement("svg", { className: 'h-full w-full text-gray-300', viewBox: '0 0 22 80', fill: 'none', preserveAspectRatio: 'none' },
                                        react_1.default.createElement("path", { d: 'M0 -2L20 40L0 82', vectorEffect: 'non-scaling-stroke', stroke: 'currentcolor', strokeLinejoin: 'round' }))))) : null)))))), (_b = listSteps === null || listSteps === void 0 ? void 0 : listSteps.find((item) => item.step === currentStep)) === null || _b === void 0 ? void 0 :
            _b.component)));
};
exports.PHXStep = PHXStep;
//# sourceMappingURL=Step.js.map