"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTableEditor = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const _1 = require(".");
const CheckBox_1 = require("../CheckBox");
const AdaptableFormControlTextClear_1 = require("../../View/Components/Forms/AdaptableFormControlTextClear");
const FormLayout_1 = tslib_1.__importStar(require("../FormLayout"));
const EditorButton_1 = tslib_1.__importDefault(require("./EditorButton"));
const Input_1 = tslib_1.__importDefault(require("../Input"));
const DateHelper_1 = require("../../Utilities/Helpers/DateHelper");
const AdaptableContext_1 = require("../../View/AdaptableContext");
const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'column', labels, }) => {
    const adaptableApi = (0, AdaptableContext_1.useAdaptable)().api;
    const [data, setData] = React.useState(initialData);
    const [showColumnIds, setShowValues] = React.useState(false);
    const [searchInputValue, setSearchInputValue] = React.useState('');
    const getColValue = (fieldValue) => {
        return adaptableApi.internalApi.getValueUsingField(data, fieldValue);
    };
    const updateColValue = (rowData, fielValue, newValue) => {
        const updatedRowData = adaptableApi.internalApi.setValueUsingField(rowData, fielValue, newValue);
        return { ...updatedRowData };
    };
    const getColDateValue = (fieldValue) => {
        const colValue = getColValue(fieldValue);
        return colValue && (0, DateHelper_1.isValueValidDate)(colValue)
            ? new Date(colValue).toISOString().substr(0, 10)
            : '';
    };
    const hasFriendlyNames = React.useMemo(() => {
        return fields.some((field) => field.label !== field.value);
    }, []);
    return (React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, style: { height: '100%' } },
        React.createElement(rebass_1.Flex, { className: `${_1.baseClassName}__${type}-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 }, mb: 2 },
            hasFriendlyNames && (React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
                    float: 'right',
                    margin: 0,
                    paddingTop: 'var(--ab-space-1)',
                    paddingBottom: 'var(--ab-space-1)',
                } }, labels?.showIds ?? 'Show Column IDs')),
            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: labels?.filterPlaceholder ?? 'Filter columns...', style: { flex: 1, marginBottom: 3 } })),
        React.createElement(FormLayout_1.default, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' } }, fields
            .filter((field) => {
            if (!searchInputValue) {
                return true;
            }
            return (field.label.includes(searchInputValue) || field.value?.includes?.(searchInputValue));
        })
            .map((field) => {
            const label = showColumnIds ? `[${field.value}]` : field.label;
            return (React.createElement(FormLayout_1.FormRow, { key: field.label, label: React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
                        background: 'var(--ab-color-primary)',
                        cursor: 'grab',
                        marginRight: 'var(--ab-space-1)',
                    }, data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag" },
                    React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, label)) }, field.dataType === 'number' ? (React.createElement(Input_1.default, { type: "number", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, Number(e.target.value))), width: "100%", disabled: field.readOnly })) : field.dataType === 'text' ? (React.createElement(Input_1.default, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), width: "100%", disabled: field.readOnly })) : field.dataType === 'date' ? (React.createElement(AdaptableInput_1.default, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: getColDateValue(field.value) ?? '', onChange: (e) => {
                    setData(updateColValue(data, field.value, new Date(e.target.value)));
                }, style: { width: '100%' }, disabled: field.readOnly })) : field.dataType === 'boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": `${type}-input`, "data-value": field.value, checked: Boolean(getColValue(field.value)), onChange: (checked) => setData(updateColValue(data, field.value, checked)), disabled: field.readOnly })) : null));
        }))));
};
exports.DataTableEditor = DataTableEditor;
