import * as React from 'react';
import { useMemo } from 'react';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import Input from '../../../components/Input';
import ErrorBox from '../../../components/ErrorBox';
import { Tabs } from '../../../components/Tabs';
import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
import { getCalculatedColumnSettingsTags } from '../Utilities/getCalculatedColumnSettingsTags';
import { Select } from '../../../components/Select';
import { Box, Flex } from '../../../components/Flex';
import { TagList } from '../../../components/Tag/Tag';
export const renderCalculatedColumnSettingsSummary = (data) => {
    const options = getCalculatedColumnSettingsTags(data.CalculatedColumnSettings);
    return React.createElement(TagList, { tags: options });
};
export const isValidCalculatedColumnSettings = (data) => {
    if (!data.CalculatedColumnSettings?.DataType) {
        return 'A data type is required. It could not be inferred from the expression.';
    }
    return true;
};
export const CalculatedColumnSettingsWizardSection = (props) => {
    const { data, api } = useOnePageAdaptableWizardContext();
    const calculatedColumnExpressionService = useMemo(() => api.internalApi.getCalculatedColumnExpressionService(), []);
    const handleDataTypeChange = (dataType) => {
        const aggregatable = dataType == 'number' ? data.CalculatedColumnSettings?.Aggregatable : false;
        props.onChange({
            ...data,
            CalculatedColumnSettings: {
                ...data.CalculatedColumnSettings,
                DataType: dataType,
                Aggregatable: aggregatable,
            },
        });
    };
    const validCheck = isValidCalculatedColumnSettings(data);
    const ErrorMessage = validCheck === true ? null : validCheck;
    const { DataType: dataType } = data.CalculatedColumnSettings ?? {};
    const { Width } = data.CalculatedColumnSettings ?? {};
    const handleSpecialColumnSettingsChange = (settings) => {
        props.onChange({
            ...data,
            CalculatedColumnSettings: {
                ...data.CalculatedColumnSettings,
                ...settings,
            },
        });
    };
    React.useEffect(() => {
        if (!dataType) {
            const computedDataType = calculatedColumnExpressionService.getCalculatedColumnDataType(data.Query);
            handleSpecialColumnSettingsChange({
                ...data?.CalculatedColumnSettings,
                DataType: computedDataType,
            });
        }
    }, []);
    const options = [
        { value: 'number', label: 'Number' },
        { value: 'text', label: 'Text' },
        { value: 'date', label: 'Date' },
        { value: 'boolean', label: 'Boolean' },
        { value: 'numberArray', label: 'NumberArray' },
    ];
    return (React.createElement(Box, { "data-name": 'calculated-column-settings' },
        React.createElement(Tabs, { autoFocus: false },
            React.createElement(Tabs.Tab, null, "Column Settings"),
            React.createElement(Tabs.Content, null,
                React.createElement(Flex, { flexDirection: "row" },
                    React.createElement(FormLayout, null,
                        React.createElement(FormRow, { label: "Data Type" },
                            React.createElement(Select, { "data-name": "column-type", placeholder: "Select Data Type", options: options, value: dataType, onChange: (value) => handleDataTypeChange(value) })),
                        React.createElement(FormRow, { label: "Width" },
                            React.createElement(Input, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
                                    Width: Number(e.target.value),
                                }) })))))),
        ErrorMessage ? React.createElement(ErrorBox, { className: "twa:mt-2" }, ErrorMessage) : null,
        React.createElement(SpecialColumnSettingsWizardStep, { isEditable: false, 
            // @ts-ignore CalculatedColumn has a broader DataType
            settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));
};
