import { CheckIcon } from '@heroicons/react/24/solid';
import React, { useEffect, useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { PHXFormWrap } from '../FormWrap';
import { PHXCard } from '../Card';
export const PHXFormStep = ({ backLabel, backRout, className, formMode, isLoading = false, nextLabel, onSubmit, size = 'large', steps, title, triggerStep, deleted = false, onDelete, }) => {
    var _a;
    const [currentStep, setCurrentStep] = useState(1);
    const [listSteps, setListSteps] = useState([]);
    const form = useForm();
    function findNextStepCurrent(item) {
        return item.step === currentStep + 1 && item.status !== 'complete';
    }
    const nextStep = async (data, stepItem) => {
        var _a, _b;
        try {
            let isPass = true;
            const funcCallNextStep = (_a = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find((func) => func.step === currentStep)) === null || _a === void 0 ? void 0 : _a.onNext;
            const satusCurrentStep = (_b = listSteps === null || listSteps === void 0 ? void 0 : listSteps.find((item) => item.step === currentStep)) === null || _b === void 0 ? void 0 : _b.status;
            if (funcCallNextStep) {
                isPass = await funcCallNextStep(data, satusCurrentStep);
            }
            // Dựa vào giá trị của hàm triggerStep trả về để quyết định xem Step có pass hay không
            if (!isPass)
                return;
            if (currentStep === (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length)) {
                onSubmit(data);
                return;
            }
            listSteps === null || listSteps === void 0 ? void 0 : listSteps.forEach((item) => {
                if (findNextStepCurrent(item)) {
                    // Cập nhật trạng thái cho thằng step tiếp theo
                    item.status = 'current';
                }
                if (item.step === currentStep)
                    item.status = 'complete';
            });
            // Kiểm tra xem có thằng StepItem truyền đến không và Step đó phải khác upcoming thì mới cho truyển đến Step đó
            if (stepItem && stepItem.step && stepItem.status !== 'upcoming') {
                setCurrentStep(stepItem.step);
            }
            else {
                setCurrentStep((currentStep) => currentStep + 1);
            }
        }
        catch (error) {
            console.error;
        }
    };
    // Tạo một hàm trung gian để xử lý việc gọi hàm nextStep với tham số bổ sung.
    const handleNextStepWithParam = async (stepItem) => {
        const onSubmitWithParam = form.handleSubmit((data) => nextStep(data, stepItem));
        onSubmitWithParam();
    };
    const handleBackStep = async (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')
            await funcCallBackStep();
        if (stepItem && stepItem.step) {
            setCurrentStep(stepItem.step);
        }
        else {
            setCurrentStep((currentStep) => currentStep - 1);
        }
    };
    const handleNextStep = () => {
        setCurrentStep((currentStep) => currentStep + 1);
    };
    const handleFindSubmitText = (formMode) => {
        switch (formMode) {
            case 'addNew':
                return 'Thêm mới';
            case 'edit':
                return 'Cập nhật';
            case 'readOnly':
                return '';
            default:
                return 'Submit';
        }
    };
    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.createElement("div", { className: className },
        React.createElement(FormProvider, { ...form },
            React.createElement(PHXFormWrap, { className: 'w-full', footerAction: deleted, onCancel: backRout, onSubmit: formMode === 'readOnly' ? form.handleSubmit(handleNextStep) : form.handleSubmit(nextStep), size: size, title: title, deleted: deleted, onlyDelete: deleted, onDelete: onDelete },
                React.createElement(PHXCard, { primaryFooterAction: {
                        content: currentStep === (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length) ? handleFindSubmitText(formMode) : nextLabel,
                        // content: currentStep === listSteps?.length ? (formMode !== 'readOnly' ? 'Submit' : '') : nextLabel,
                        submit: true,
                        loading: isLoading,
                    }, secondaryFooterActions: [
                        {
                            content: currentStep !== 1 ? backLabel : '',
                            onClick: handleBackStep,
                        },
                    ] },
                    React.createElement("nav", { "aria-label": 'Progress' },
                        React.createElement("ol", { className: 'divide-y divide-gray-300 rounded-md border border-gray-300 md:flex md:divide-y-0', role: 'list' }, listSteps &&
                            listSteps.map((stepItem, stepIdx) => (React.createElement("li", { key: stepIdx, className: 'relative cursor-pointer md:flex md:flex-1' },
                                React.createElement("button", { disabled: stepItem.step === currentStep, onClick: () => stepItem.step < currentStep || formMode === 'readOnly'
                                        ? handleBackStep(stepItem)
                                        : handleNextStepWithParam(stepItem), type: 'button' },
                                    stepItem.status === 'complete' ? (React.createElement("div", { className: 'group flex w-full items-center' },
                                        React.createElement("span", { className: 'flex items-center px-6 py-3 text-sm font-medium' },
                                            React.createElement("span", { className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 group-hover:bg-indigo-700  ${stepItem.step === currentStep && 'bg-indigo-800'}` },
                                                React.createElement(CheckIcon, { "aria-hidden": 'true', className: 'h-6 w-6 text-white' })),
                                            React.createElement("span", { className: 'ml-4 text-sm font-medium text-gray-900' }, stepItem.title),
                                            stepItem.required && (React.createElement("span", { className: 'ml-1 text-xs font-medium text-red-500' }, `(*)`))))) : stepItem.status === 'current' ? (React.createElement("div", { "aria-current": 'step', className: 'flex items-center px-6 py-3 text-sm font-medium' },
                                        React.createElement("span", { className: 'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-indigo-600' },
                                            React.createElement("span", { className: 'text-indigo-600' }, stepItem.step)),
                                        React.createElement("span", { className: 'ml-4 text-sm font-medium text-indigo-600' }, stepItem.title),
                                        stepItem.required && (React.createElement("span", { className: 'ml-1 text-xs font-medium text-red-500' }, `(*)`)))) : (React.createElement("div", { className: 'group flex items-center' },
                                        React.createElement("span", { className: 'flex items-center px-6 py-3 text-sm font-medium' },
                                            React.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.createElement("span", { className: 'text-gray-500 group-hover:text-gray-900' }, stepItem.step)),
                                            React.createElement("span", { className: 'ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900' }, stepItem.title),
                                            stepItem.required && (React.createElement("span", { className: 'ml-1 text-xs font-medium text-red-500' }, `(*)`))))),
                                    stepIdx !== (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length) - 1 ? (React.createElement(React.Fragment, null,
                                        React.createElement("div", { "aria-hidden": 'true', className: 'absolute right-0 top-0 hidden h-full w-5 md:block' },
                                            React.createElement("svg", { className: 'h-full w-full text-gray-300', fill: 'none', preserveAspectRatio: 'none', viewBox: '0 0 22 80' },
                                                React.createElement("path", { d: 'M0 -2L20 40L0 82', stroke: 'currentcolor', strokeLinejoin: 'round', vectorEffect: 'non-scaling-stroke' }))))) : null)))))),
                    React.createElement("div", { className: 'pt-3' }, (_a = listSteps === null || listSteps === void 0 ? void 0 : listSteps.find((item) => item.step === currentStep)) === null || _a === void 0 ? void 0 : _a.component))))));
};
//# sourceMappingURL=FormStep.js.map