import * as React from 'react';
import { useCallback } from 'react';
import DropdownButton from '../../../components/DropdownButton';
import UIHelper from '../../UIHelper';
import AdaptableInput from '../AdaptableInput';
import { PermittedValuesSelector } from './PermittedValuesSelector';
import { useAdaptable } from '../../AdaptableContext';
import clsx from 'clsx';
import { Box, Flex } from '../../../components/Flex';
import { Icon } from '../../../components/icons';
import { InputGroup } from '../../../components/InputGroup';
export const BulkUpdateValueSelector = (props) => {
    const [valueType, setValueType] = React.useState('existing');
    const adaptable = useAdaptable();
    const columnDataType = props.selectedColumn?.dataType;
    const isDateType = props.selectedColumn && columnDataType === 'date';
    const columnId = props.selectedColumn?.columnId;
    // TODO = this seems to be called whenever we edit a cell
    // which is then triggering a get all values
    // not sure that we need to
    const permittedValueSelector = (React.createElement(Box, { className: 'twa:flex-1' },
        React.createElement(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select value', loadValues: useCallback(({ currentSearchValue }) => {
                if (!columnId || !props.selectedGridCells.length) {
                    return Promise.resolve([]);
                }
                return adaptable.api.gridApi.internalApi.getDistinctEditDisplayValuesForColumn({
                    columnId,
                    gridCell: props.selectedGridCells[0],
                    currentSearchValue,
                });
            }, [
                columnId,
                props.selectedGridCells?.[0]?.column.columnId,
                props.selectedGridCells?.[0]?.primaryKeyValue,
            ]), onChange: (value) => {
                props.onColumnValueChange(value || null);
            } })));
    const input = (React.createElement(AdaptableInput, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update Value Input", type: props.selectedColumn
            ? UIHelper.getDescriptionForDataType(props.selectedColumn.dataType)
            : 'text', placeholder: props.selectedColumn
            ? UIHelper.getPlaceholderForDataType(props.selectedColumn.dataType)
            : 'Enter Value', autoFocus: true, disabled: props.disabled, className: "twa:w-full", value: props.selectedColumnValue, onChange: (e) => {
            props.onColumnValueChange(e.target.value);
        } }));
    return (React.createElement(Flex, { className: clsx('twa:overflow-visible twa:max-w-full', props.className), style: props.style }, isDateType ? (React.createElement(React.Fragment, null,
        React.createElement(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full" },
            React.createElement(DropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, columns: ['label'], variant: "outlined", tone: "neutral", items: [
                    { label: 'New', icon: React.createElement(Icon, { name: "edit" }), onClick: () => setValueType('new') },
                    {
                        label: 'Existing',
                        icon: React.createElement(Icon, { name: "grid" }),
                        onClick: () => setValueType('existing'),
                    },
                ] },
                React.createElement(React.Fragment, null, valueType === 'existing' ? React.createElement(Icon, { name: "grid" }) : React.createElement(Icon, { name: "edit" }))),
            valueType === 'new' ? input : permittedValueSelector))) : (permittedValueSelector)));
};
