import * as React from 'react';
import { baseClassName } from '.';
import { CheckBox } from '../CheckBox';
import { AdaptableFormControlTextClear } from '../../View/Components/Forms/AdaptableFormControlTextClear';
import FormLayout, { FormRow } from '../FormLayout';
import EditorButton from './EditorButton';
import Input from '../Input';
import { isValueValidDate } from '../../Utilities/Helpers/DateHelper';
import { useAdaptable } from '../../View/AdaptableContext';
import AdaptableInput from '../../View/Components/AdaptableInput';
import { Flex } from '../Flex';
export const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'column', labels, }) => {
    const adaptableApi = 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 && isValueValidDate(colValue)
            ? new Date(colValue).toISOString().substr(0, 10)
            : '';
    };
    const hasFriendlyNames = React.useMemo(() => {
        return fields.some((field) => field.label !== field.value);
    }, []);
    return (React.createElement(Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, className: "twa:h-full" },
        React.createElement(Flex, { className: `${baseClassName}__${type}-list twa:mb-2 twa:mt-[2px]`, flexDirection: "column", alignItems: "flex-start" },
            hasFriendlyNames && (React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
                    float: 'right',
                    margin: 0,
                    paddingTop: 'var(--ab-base-space)',
                    paddingBottom: 'var(--ab-base-space)',
                } }, labels?.showIds ?? 'Show Column IDs')),
            React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: labels?.filterPlaceholder ?? 'Filter columns...', style: { flex: 1, marginBottom: 3 } })),
        React.createElement(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-base-space)", gridRowGap: "var(--ab-base-space)", 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(FormRow, { key: field.label, label: React.createElement(EditorButton, { className: "twa:w-full twa:h-full twa:bg-primary twa:cursor-grab twa:mr-1", data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag" },
                    React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start" }, label)) }, field.dataType === 'number' ? (React.createElement(Input, { 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))), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'text' ? (React.createElement(Input, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'date' ? (React.createElement(AdaptableInput, { 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)));
                }, className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'boolean' ? (React.createElement(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));
        }))));
};
