import * as React from 'react';
import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
import { SortOrder } from '../../../AdaptableState/Common/Enums';
import { ArrayExtensions } from '../../../Utilities/Extensions/ArrayExtensions';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import DropdownButton from '../../../components/DropdownButton';
export class ColumnSelector extends React.Component {
    render() {
        const sortedColumns = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, this.props.ColumnList, 'friendlyName');
        const selectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions.IsNotNullOrEmpty(x));
        const isEmptySelectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions.IsNotNullOrEmpty(x)).length == 0;
        let sortedColumnOptions = sortedColumns.map((column) => {
            return {
                label: column.friendlyName,
                value: column.columnId,
                disabled: this.props.disabled,
                onClick: () => {
                    const selected = sortedColumns.filter((c) => c.columnId === column.columnId);
                    if (!selected.length) {
                        this.onClearButton();
                    }
                    else {
                        this.onColumnChange(selected, isEmptySelectedColumnIds);
                    }
                },
            };
        });
        let currentColumnName = selectedColumnIds.length > 0
            ? this.props.ColumnList.find((c) => c.columnId == selectedColumnIds[0])?.friendlyName
            : 'Select a column';
        return (React.createElement("div", { "data-name": 'column-selector' },
            React.createElement(FormLayout, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },
                React.createElement(FormRow, null,
                    React.createElement(DropdownButton, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, items: sortedColumnOptions, disabled: this.props.disabled || sortedColumnOptions.length == 0 }, currentColumnName)))));
    }
    onClearButton() {
        this.props.onColumnChange([]);
    }
    onColumnChange(selected, isEmptySelection) {
        if (selected.length == 0 && isEmptySelection) {
            return; // must be a nicer way but we want to avoid ridiculous amounts of prop calls
        }
        this.props.onColumnChange(selected);
    }
}
