"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalculatedColumnDefinitionWizardSection = exports.isValidCalculatedColumnDefinition = exports.renderCalculatedColumnDefinitionSummary = 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 CheckBox_1 = require("../../../components/CheckBox");
const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
const Tabs_1 = require("../../../components/Tabs");
const Tag_1 = require("../../../components/Tag");
const renderCalculatedColumnDefinitionSummary = (data) => {
    return (React.createElement(rebass_1.Box, { fontSize: 2 },
        React.createElement(rebass_1.Box, null,
            "Column Identifier: ",
            React.createElement(Tag_1.Tag, null, data.ColumnId)),
        data.FriendlyName ? (React.createElement(rebass_1.Box, { mt: 3 },
            "Column Name: ",
            React.createElement(Tag_1.Tag, null, data.FriendlyName ?? data.ColumnId))) : null));
};
exports.renderCalculatedColumnDefinitionSummary = renderCalculatedColumnDefinitionSummary;
const isValidCalculatedColumnDefinition = (data, api) => {
    const columns = api.columnApi.getColumns();
    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;
    return hasAlreadyExistingId ? 'A Column already exists with that id' : true;
};
exports.isValidCalculatedColumnDefinition = isValidCalculatedColumnDefinition;
const CalculatedColumnDefinitionWizardSection = (props) => {
    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const handleColumnIdChange = (event) => {
        let e = event.target;
        props.onChange({
            ...data,
            ColumnId: e.value,
        });
    };
    const handleColumnNameChange = (event) => {
        let e = event.target;
        props.onChange({
            ...data,
            FriendlyName: e.value,
        });
    };
    const inEdit = props.isEdit;
    const validCheck = (0, exports.isValidCalculatedColumnDefinition)(data, api);
    const ErrorMessage = validCheck === true ? null : validCheck;
    const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.useState)(false);
    const ColumnName = data.FriendlyName;
    const ColumnId = data.ColumnId;
    const { ShowToolTip, HeaderToolTip } = data.CalculatedColumnSettings ?? {};
    const handleSpecialColumnSettingsChange = (settings) => {
        props.onChange({
            ...data,
            CalculatedColumnSettings: {
                ...data.CalculatedColumnSettings,
                ...settings,
            },
        });
    };
    return (React.createElement(rebass_1.Box, { "data-name": 'calculated-column-definition' },
        React.createElement(Tabs_1.Tabs, { autoFocus: false },
            React.createElement(Tabs_1.Tabs.Tab, null, "Column Details"),
            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: "Column Id" },
                            React.createElement(Input_1.default, { "data-name": "column-id", value: data.ColumnId || '', width: 300, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter an Id for the column", onChange: handleColumnIdChange })),
                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
                            React.createElement(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
                                    setColumnNameFocused(true);
                                }, onBlur: () => {
                                    setColumnNameFocused(false);
                                }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', width: 300, type: "text", placeholder: "Enter column name", onChange: handleColumnNameChange })),
                        React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
                            React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", width: 300, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
                                    HeaderToolTip: e.target.value,
                                }) })),
                        ' ',
                        React.createElement(FormLayout_1.FormRow, { label: "" },
                            React.createElement(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")))))),
        ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null));
};
exports.CalculatedColumnDefinitionWizardSection = CalculatedColumnDefinitionWizardSection;
