"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalculatedColumnSettingsWizardSection = exports.isValidCalculatedColumnSettings = exports.renderCalculatedColumnSettingsSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const rebass_1 = require("rebass");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
const Tabs_1 = require("../../../components/Tabs");
const ValueSelector_1 = require("../../Components/ValueSelector");
const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
const getCalculatedColumnSettingsTags_1 = require("../Utilities/getCalculatedColumnSettingsTags");
const Select_1 = require("../../../components/Select");
const renderCalculatedColumnSettingsSummary = (data) => {
    const options = (0, getCalculatedColumnSettingsTags_1.getCalculatedColumnSettingsTags)(data.CalculatedColumnSettings);
    return (React.createElement(rebass_1.Box, { fontSize: 2 },
        React.createElement(ValueSelector_1.ValueOptionsTags, { toLabel: (x) => x, toIdentifier: (c) => c, readOnly: true, options: options, value: options })));
};
exports.renderCalculatedColumnSettingsSummary = renderCalculatedColumnSettingsSummary;
const isValidCalculatedColumnSettings = (data) => {
    if (!data.CalculatedColumnSettings?.DataType) {
        return 'No data type is specified and it could not be inferred from the defined expression';
    }
    return true;
};
exports.isValidCalculatedColumnSettings = isValidCalculatedColumnSettings;
const CalculatedColumnSettingsWizardSection = (props) => {
    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const calculatedColumnExpressionService = (0, react_1.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 = (0, exports.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(rebass_1.Box, { "data-name": 'calculated-column-settings' },
        React.createElement(Tabs_1.Tabs, { autoFocus: false },
            React.createElement(Tabs_1.Tabs.Tab, null, "Column Settings"),
            React.createElement(Tabs_1.Tabs.Content, null,
                React.createElement(rebass_1.Flex, { flexDirection: "row" },
                    React.createElement(FormLayout_1.default, null,
                        React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
                            React.createElement(Select_1.Select, { "data-name": "column-type", placeholder: "Select Data Type", options: options, value: dataType, onChange: (value) => handleDataTypeChange(value) })),
                        React.createElement(FormLayout_1.FormRow, { label: "Width" },
                            React.createElement(Input_1.default, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
                                    Width: Number(e.target.value),
                                }) })))))),
        ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null,
        React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, 
            // @ts-ignore CalculatedColumn has a broader DataType
            settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));
};
exports.CalculatedColumnSettingsWizardSection = CalculatedColumnSettingsWizardSection;
