import * as React from 'react';
import { useState } from 'react';
import { Box } from 'rebass';
import { useDispatch } from 'react-redux';
import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../Wizard/OnePageAdaptableWizard';
import ObjectFactory from '../../../Utilities/ObjectFactory';
import * as StyledColumnRedux from '../../../Redux/ActionsReducers/StyledColumnRedux';
import { renderStyledColumnTypeSummary, StyledColumnWizardTypeSection, } from './StyledColumnWizardTypeSection';
import { isValidStyledColumnColumn, renderStyledColumnColumnSummary, StyledColumnWizardColumnSection, } from './StyledColumnWizardColumnSection';
import { renderStyledColumnStyleSummary, StyledColumnWizardStyleSection, } from './StyledColumnWizardStyleSection';
import { cloneObject } from '../../../Utilities/Helpers/Helper';
import { renderStyledColumnWizardSettingsSummary, StyledColumnWizardSettingsSection, } from './StyledColumnWizardSettingsSection';
import { StyledColumnSparklineSettingsSection } from './StyledColumnSparklineSettingsSection';
import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
import { renderBadgeSummary, StyledColumnBadgeSection } from './StyledColumnBadgeSection';
export const StyledColumnWizard = (props) => {
    const data = props.data ?? props.popupParams?.value;
    const popupDefaultCurrentSectionName = props?.popupParams?.config?.defaultCurrentSectionName ?? undefined;
    const defaultCurrentSectionName = props.defaultCurrentSectionName ?? popupDefaultCurrentSectionName;
    const [styledColumn, setStyledColumn] = useState(() => {
        if (data) {
            return cloneObject(data);
        }
        const newData = ObjectFactory.CreateEmptyStyledColumn();
        newData.GradientStyle = {};
        if (props.popupParams?.column && props.popupParams?.action === 'New') {
            newData.ColumnId = props.popupParams.column.columnId;
            if (props.popupParams.column.dataType === 'text') {
                newData.BadgeStyle = {
                    Badges: [ObjectFactory.CreateDefaultStyledColumnBadge()],
                };
                delete newData.GradientStyle;
            }
            else if (props.popupParams.column.dataType.includes('Array')) {
                newData.SparklineStyle = {};
                delete newData.GradientStyle;
            }
        }
        return newData;
    });
    const dispatch = useDispatch();
    const handleFinish = () => {
        if (props?.popupParams?.action === 'New' || !data) {
            dispatch(StyledColumnRedux.StyledColumnAdd(styledColumn));
        }
        else {
            dispatch(StyledColumnRedux.StyledColumnEdit(styledColumn));
        }
        props.onFinishWizard(styledColumn);
    };
    const AdditionalSettingSection = {
        details: 'Apply Additional Settings',
        renderSummary: renderStyledColumnWizardSettingsSummary,
        render: () => {
            return (React.createElement(Box, { padding: 2 },
                React.createElement(StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
        },
        title: 'Settings',
    };
    const specificSteps = [];
    if (styledColumn.SparklineStyle) {
        specificSteps.push({
            title: 'Settings',
            render: () => (React.createElement(Box, { p: 2 },
                React.createElement(StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
        });
    }
    else if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
        specificSteps.push({
            details: 'Create the Style to apply',
            renderSummary: renderStyledColumnStyleSummary,
            render: () => {
                return (React.createElement(Box, { padding: 2 },
                    React.createElement(StyledColumnWizardStyleSection, { onChange: setStyledColumn })));
            },
            title: 'Style',
            isValid: () => {
                const columnComparison = styledColumn.GradientStyle?.ColumnComparison ??
                    styledColumn.PercentBarStyle?.ColumnComparison;
                return columnComparison
                    ? columnComparison.MaxValue == undefined && columnComparison.MinValue == undefined
                        ? 'Define Min and Max Values for the Column Comparison'
                        : columnComparison.MaxValue == undefined
                            ? 'Define a Max Value for the Column Comparison'
                            : columnComparison.MinValue == undefined
                                ? 'Define a Min Value for the Column Comparison'
                                : true
                    : true;
            },
        }
        // Only available for Badge
        // AdditionalSettingSection
        );
    }
    else if (styledColumn.BadgeStyle) {
        specificSteps.push({
            title: 'Badges',
            details: 'Create Badge Styles',
            isValid: () => {
                if (styledColumn.BadgeStyle.Badges?.length === 0) {
                    return 'Define at least one Badge';
                }
                const badgesWithNoRules = styledColumn.BadgeStyle.Badges.filter((b) => b.Expression == undefined && b.Predicate == undefined);
                if (badgesWithNoRules.length > 1) {
                    return 'Only one Badge can have no Rule';
                }
                return true;
            },
            renderSummary: () => renderBadgeSummary(styledColumn),
            render: () => (React.createElement(Box, { p: 2 },
                React.createElement(StyledColumnBadgeSection, { onChange: setStyledColumn }))),
        });
        specificSteps.push(AdditionalSettingSection);
    }
    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
            {
                details: 'Select a Styled Column type',
                renderSummary: renderStyledColumnTypeSummary,
                render: () => {
                    return React.createElement(StyledColumnWizardTypeSection, { onChange: setStyledColumn });
                },
                title: 'Type',
            },
            {
                isValid: isValidStyledColumnColumn,
                renderSummary: renderStyledColumnColumnSummary,
                details: 'Select the Column where the Style will be applied',
                render: () => {
                    return (React.createElement(Box, { padding: 2, style: { height: '100%' } },
                        React.createElement(StyledColumnWizardColumnSection, { isNew: props.isNew, onChange: setStyledColumn })));
                },
                title: 'Column',
            },
            ...specificSteps,
            {
                details: 'Select Format Column Tags',
                title: 'Tags',
                isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
                render: () => (React.createElement(Box, { padding: 2 },
                    React.createElement(ObjectTagsWizardSection, { onChange: setStyledColumn }))),
                renderSummary: renderObjectTagsSummary,
            },
            '-',
            {
                title: 'Summary',
                details: 'Review your Styled Column',
                render: () => {
                    return (React.createElement(Box, { padding: 2 },
                        React.createElement(OnePageWizardSummary, null)));
                },
            },
        ] }));
};
