"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FreeTextColumnSettingsWizardSection = exports.isValidFreeTextColumn = exports.renderFreeTextColumnSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
const CheckBox_1 = require("../../../components/CheckBox");
const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
const Tag_1 = require("../../../components/Tag");
const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
const Select_1 = require("../../../components/Select");
const Flex_1 = require("../../../components/Flex");
const options = [
    { value: 'number', label: 'Number' },
    { value: 'text', label: 'Text' },
    { value: 'date', label: 'Date' },
    { value: 'boolean', label: 'Boolean' },
];
const renderFreeTextColumnSummary = (data) => {
    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
        React.createElement(Flex_1.Box, null,
            "Column Identifier: ",
            React.createElement(Tag_1.Tag, null, data.ColumnId)),
        data.FriendlyName ? (React.createElement(Flex_1.Box, { className: "twa:mt-3" },
            "Column Name: ",
            React.createElement(Tag_1.Tag, null, data.FriendlyName ?? data.ColumnId))) : null,
        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
            "Data Type: ",
            React.createElement(Tag_1.Tag, null, data.FreeTextColumnSettings.DataType)),
        data.DefaultValue !== undefined ? (React.createElement(Flex_1.Box, { className: "twa:mt-3" },
            "Default Value: ",
            React.createElement(Tag_1.Tag, null, data.DefaultValue))) : null,
        data.TextEditor !== undefined ? (React.createElement(Flex_1.Box, { className: "twa:mt-3" },
            "Editor Type: ",
            React.createElement(Tag_1.Tag, null, data.TextEditor))) : null));
};
exports.renderFreeTextColumnSummary = renderFreeTextColumnSummary;
const isValidFreeTextColumn = (data, api) => {
    const columns = api.columnApi.getUIAvailableColumns();
    if (!data.ColumnId) {
        return 'A Column ID is required.';
    }
    const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
    const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
    if (hasAlreadyExistingId) {
        return 'A column with this ID already exists.';
    }
    if (!data.FreeTextColumnSettings.DataType) {
        return 'A data type is required for the column.';
    }
    return true;
};
exports.isValidFreeTextColumn = isValidFreeTextColumn;
const FreeTextColumnSettingsWizardSection = (props) => {
    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
    const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.useState)(false);
    const inEdit = props.isEdit;
    const validCheck = (0, exports.isValidFreeTextColumn)(data, api);
    const ErrorMessage = validCheck === true ? null : validCheck;
    const handleColumnIdChange = (event) => {
        let e = event.target;
        const ColumnId = e.value;
        props.onChange({
            ...data,
            ColumnId,
        });
    };
    const handleColumnNameChange = (event) => {
        let e = event.target;
        const ColumnName = e.value;
        props.onChange({
            ...data,
            FriendlyName: ColumnName,
        });
    };
    const handleDataTypeChange = (DataType) => {
        const newData = {
            ...data,
            FreeTextColumnSettings: {
                ...data.FreeTextColumnSettings,
                DataType,
            },
        };
        delete newData.DefaultValue;
        if (!DataType) {
            delete newData.FreeTextColumnSettings?.DataType;
        }
        props.onChange(newData);
    };
    const onDynamicSelectChanged = (event) => {
        let e = event.target;
        const TextEditor = e.value;
        props.onChange({
            ...data,
            TextEditor,
        });
    };
    const handleDefaultValueChange = (event) => {
        let e = event.target;
        let DefaultValue = e.value;
        if (data.FreeTextColumnSettings.DataType === 'date') {
            DefaultValue = (0, FormatHelper_1.DateFormatter)(DefaultValue, {
                Pattern,
            });
        }
        props.onChange({
            ...data,
            DefaultValue,
        });
    };
    const handleSpecialColumnSettingsChange = (
    //  settings: SpecialColumnSettings
    settings) => {
        props.onChange({
            ...data,
            FreeTextColumnSettings: {
                ...data?.FreeTextColumnSettings,
                ...settings,
            },
        });
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(FormLayout_1.default, null,
            React.createElement(FormLayout_1.FormRow, { label: "Column Id" },
                React.createElement(Input_1.default, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
            React.createElement(FormLayout_1.FormRow, { label: "Column Name" },
                React.createElement(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
                        setColumnNameFocused(true);
                    }, onBlur: () => {
                        setColumnNameFocused(false);
                    }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a name", onChange: (e) => handleColumnNameChange(e) })),
            React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
                React.createElement(Flex_1.Box, { className: "twa:max-w-[500px]" },
                    React.createElement(Select_1.Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
            React.createElement(FormLayout_1.FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
                    props.onChange({
                        ...data,
                        DefaultValue,
                    });
                } })) : (React.createElement(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
                    ? (0, DateHelper_1.parseToISO)(data.DefaultValue, Pattern) || ''
                    : data.DefaultValue || '', className: "twa:w-full twa:max-w-[500px]", type: data.FreeTextColumnSettings.DataType === 'number'
                    ? 'number'
                    : data.FreeTextColumnSettings.DataType === 'date'
                        ? 'date'
                        : 'text', placeholder: "Default Column Value (optional)", onChange: (e) => handleDefaultValueChange(e) }))),
            React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
                React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: data.FreeTextColumnSettings?.HeaderToolTip || '', onChange: (e) => handleSpecialColumnSettingsChange({
                        HeaderToolTip: e.target.value,
                    }) })),
            ' ',
            data.FreeTextColumnSettings.DataType == 'text' && (React.createElement(FormLayout_1.FormRow, { label: "Cell Editor" },
                React.createElement(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), className: "twa:mr-2" }, "Inline Editor"),
                React.createElement(Radio_1.default, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
        ErrorMessage ? React.createElement(ErrorBox_1.default, { className: "twa:my-2" }, ErrorMessage) : null,
        React.createElement(Flex_1.Box, { className: "twa:mt-2" },
            React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));
};
exports.FreeTextColumnSettingsWizardSection = FreeTextColumnSettingsWizardSection;
