import * as React from 'react';
import { useState } from 'react';
import Input from '../../../components/Input';
import ErrorBox from '../../../components/ErrorBox';
import Radio from '../../../components/Radio';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import AdaptableInput from '../../Components/AdaptableInput';
import { CheckBox } from '../../../components/CheckBox';
import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
import { Tag } from '../../../components/Tag';
import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
import { Select } from '../../../components/Select';
import { Box } from '../../../components/Flex';
const options = [
    { value: 'number', label: 'Number' },
    { value: 'text', label: 'Text' },
    { value: 'date', label: 'Date' },
    { value: 'boolean', label: 'Boolean' },
];
export const renderFreeTextColumnSummary = (data) => {
    return (React.createElement(Box, { className: "twa:text-2" },
        React.createElement(Box, null,
            "Column Identifier: ",
            React.createElement(Tag, null, data.ColumnId)),
        data.FriendlyName ? (React.createElement(Box, { className: "twa:mt-3" },
            "Column Name: ",
            React.createElement(Tag, null, data.FriendlyName ?? data.ColumnId))) : null,
        React.createElement(Box, { className: "twa:mt-3" },
            "Data Type: ",
            React.createElement(Tag, null, data.FreeTextColumnSettings.DataType)),
        data.DefaultValue !== undefined ? (React.createElement(Box, { className: "twa:mt-3" },
            "Default Value: ",
            React.createElement(Tag, null, data.DefaultValue))) : null,
        data.TextEditor !== undefined ? (React.createElement(Box, { className: "twa:mt-3" },
            "Editor Type: ",
            React.createElement(Tag, null, data.TextEditor))) : null));
};
export const isValidFreeTextColumn = (data, api) => {
    const columns = api.columnApi.getUIAvailableColumns();
    if (!data.ColumnId) {
        return 'Column Id cannot be empty';
    }
    const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
    const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
    if (hasAlreadyExistingId) {
        return 'A Column already exists with that id';
    }
    if (!data.FreeTextColumnSettings.DataType) {
        return 'No data type specified for column';
    }
    return true;
};
export const FreeTextColumnSettingsWizardSection = (props) => {
    const { data, api } = useOnePageAdaptableWizardContext();
    const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
    const [ColumnNameFocused, setColumnNameFocused] = useState(false);
    const inEdit = props.isEdit;
    const validCheck = 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 = 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, null,
            React.createElement(FormRow, { label: "Column Id" },
                React.createElement(Input, { "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(FormRow, { label: "Column Name" },
                React.createElement(Input, { "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(FormRow, { label: "Data Type" },
                React.createElement(Box, { className: "twa:max-w-[500px]" },
                    React.createElement(Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
            React.createElement(FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'boolean' ? (React.createElement(CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
                    props.onChange({
                        ...data,
                        DefaultValue,
                    });
                } })) : (React.createElement(AdaptableInput, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
                    ? 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(FormRow, { label: "Header Tooltip" },
                React.createElement(Input, { "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(FormRow, { label: "Cell Editor" },
                React.createElement(Radio, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), className: "twa:mr-2" }, "Inline Editor"),
                React.createElement(Radio, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
        ErrorMessage ? React.createElement(ErrorBox, { className: "twa:my-2" }, ErrorMessage) : null,
        React.createElement(Box, { className: "twa:mt-2" },
            React.createElement(SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));
};
