"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnSelector = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
const Enums_1 = require("../../../AdaptableState/Common/Enums");
const ArrayExtensions_1 = require("../../../Utilities/Extensions/ArrayExtensions");
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
class ColumnSelector extends React.Component {
    render() {
        const sortedColumns = ArrayExtensions_1.ArrayExtensions.sortArrayWithProperty(Enums_1.SortOrder.Asc, this.props.ColumnList, 'friendlyName');
        const selectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x));
        const isEmptySelectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.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_1.default, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },
                React.createElement(FormLayout_1.FormRow, null,
                    React.createElement(DropdownButton_1.default, { 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);
    }
}
exports.ColumnSelector = ColumnSelector;
