import * as React from 'react';
import { useState } from 'react';
import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
import { cloneObject } from '../../../Utilities/Helpers/Helper';
import { CustomSortColumnWizardSection, isValidCustomSortColumn, renderCustomSortColumn, } from './CustomSortColumnWizardSection';
import { CustomSortValuesWizardSection, isValidCustomSortOrder, renderCustomSortValuesSummary, } from './CustomSortValuesWizardSection';
import ObjectFactory from '../../../Utilities/ObjectFactory';
import { useDispatch, useSelector } from 'react-redux';
import * as CustomSortRedux from '../../../Redux/ActionsReducers/CustomSortRedux';
import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
import { Box } from '../../../components/Flex';
export const CustomSortWizard = (props) => {
    let data = props.data;
    const allCustomSorts = useSelector((state) => state.CustomSort?.CustomSorts);
    if (props.popupParams?.action === 'Edit' && props.popupParams?.column) {
        data = allCustomSorts.find((x) => x.ColumnId == props.popupParams?.column.columnId);
    }
    const [customSort, setCustomSort] = useState(() => {
        if (data) {
            return cloneObject(data);
        }
        const newData = ObjectFactory.CreateEmptyCustomSort();
        if (props.popupParams?.column) {
            newData.ColumnId = props.popupParams?.column.columnId;
        }
        return newData;
    });
    const dispatch = useDispatch();
    const handleFinish = () => {
        if (data) {
            dispatch(CustomSortRedux.CustomSortEdit(customSort));
        }
        else {
            dispatch(CustomSortRedux.CustomSortAdd(customSort));
        }
        props.onFinishWizard(customSort);
    };
    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
            {
                isValid: (data) => isValidCustomSortColumn(data, allCustomSorts),
                renderSummary: renderCustomSortColumn,
                details: 'Enter Name and select a Column for Custom Sort',
                render: () => {
                    return (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                        React.createElement(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts })));
                },
                title: 'Name & Column',
            },
            {
                title: 'Sort Order',
                details: 'Specify Custom Sort order - drag selected items to modify order',
                isValid: isValidCustomSortOrder,
                renderSummary: renderCustomSortValuesSummary,
                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                    React.createElement(CustomSortValuesWizardSection, { onChange: setCustomSort }))),
            },
            {
                details: 'Select Custom Sort Tags',
                title: 'Tags',
                isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
                render: () => (React.createElement(Box, { className: "twa:p-2" },
                    React.createElement(ObjectTagsWizardSection, { onChange: setCustomSort }))),
                renderSummary: renderObjectTagsSummary,
            },
            '-',
            {
                title: 'Summary',
                details: 'Review your Custom Sort',
                render: () => {
                    return (React.createElement(Box, { className: "twa:p-2" },
                        React.createElement(OnePageWizardSummary, null)));
                },
            },
        ] }));
};
