"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListBoxFilterForm = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
const ListGroupItem_1 = tslib_1.__importDefault(require("../../../components/List/ListGroupItem"));
const rebass_1 = require("rebass");
const CheckBox_1 = require("../../../components/CheckBox");
const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
const AdaptableFormControlTextClear_1 = require("../Forms/AdaptableFormControlTextClear");
const GridList_1 = tslib_1.__importDefault(require("../../../components/List/GridList"));
const react_1 = require("react");
const Loader_1 = require("../../../components/Loader");
const isEqual_1 = tslib_1.__importDefault(require("date-fns/isEqual"));
const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
const ListBoxFilterForm = (props) => {
    const [FilterValue, setFilterValue] = (0, react_1.useState)('');
    const handleFilterValueChange = React.useCallback((newValue) => {
        setFilterValue(newValue);
        props === null || props === void 0 ? void 0 : props.onFilterChange(newValue);
    }, [props.onFilterChange]);
    const [UiSelectedColumnValues, internalUpdateUISelectedColumnValues] = (0, react_1.useState)(props.uiSelectedColumnValues);
    const setUiSelectedColumnValues = (values) => {
        internalUpdateUISelectedColumnValues(values);
        props.onColumnValueSelectedChange(values);
    };
    (0, react_1.useEffect)(() => {
        internalUpdateUISelectedColumnValues(props.uiSelectedColumnValues);
    }, [props.uiSelectedColumnValues]);
    const renderItemForAgGridStyle = (props) => {
        return (React.createElement(CheckBox_1.CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1, title: typeof props.children === 'string' ? props.children : null })));
    };
    const onClickItemColumnValue = (item) => {
        let index = UiSelectedColumnValues.indexOf(item);
        if (item instanceof Date) {
            index = UiSelectedColumnValues.findIndex((selectedValue) => (0, isEqual_1.default)((0, DateHelper_1.parseDateValue)(selectedValue), (0, DateHelper_1.parseDateValue)(item)));
        }
        if (index >= 0) {
            const newArray = [...UiSelectedColumnValues];
            newArray.splice(index, 1);
            setUiSelectedColumnValues(newArray);
        }
        else {
            setUiSelectedColumnValues([...UiSelectedColumnValues, item]);
        }
    };
    const permittedValuesOptions = props.columnDistinctValues;
    const columnValuesItemsElements = permittedValuesOptions.map((distinctValue, index) => {
        let isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
        // special case for date objects, need to check against string values
        if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
            isActive = UiSelectedColumnValues.some((dateStr) => (0, isEqual_1.default)((0, DateHelper_1.parseDateValue)(dateStr), (0, DateHelper_1.parseDateValue)(distinctValue.value)));
        }
        const columnLabel = distinctValue.label;
        if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel)) {
            return null;
        }
        const noMatch = StringExtensions_1.StringExtensions.IsNullOrEmpty(FilterValue.toLocaleLowerCase()) ||
            StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel === null || columnLabel === void 0 ? void 0 : columnLabel.toLocaleLowerCase()) ||
            columnLabel.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0;
        if (!props.suppressClientSideFilter &&
            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(FilterValue) &&
            noMatch) {
            return null;
        }
        if (props.useAgGridStyle) {
            return renderItemForAgGridStyle({
                key: 'columnValue' + index,
                children: distinctValue.label,
                checked: isActive,
                onChange: () => onClickItemColumnValue(distinctValue.value),
                disabled: props.disabled,
                style: { width: '100%' },
            });
        }
        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));
    });
    const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: false, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
            paddingTop: 'var(--ab-space-1)',
            paddingBottom: 'var(--ab-space-1)',
        }, inputStyle: { padding: 'var(--ab-space-1)' }, OnTextChange: handleFilterValueChange }));
    const baseClassName = 'ab-ListBoxFilterForm';
    return (React.createElement("div", { className: (0, join_1.default)(baseClassName, props.useAgGridStyle ? `${baseClassName}--aggrid-style` : null, props.isLoading && `${baseClassName}--loading`) },
        React.createElement(rebass_1.Box, { px: 2 },
            React.createElement(rebass_1.Box, { mx: props.useAgGridStyle ? 0 : '2px', marginBottom: 2 },
                textClear,
                props.isLoading && React.createElement(Loader_1.Loader, null, "Loading"))),
        !props.isLoading && (React.createElement(GridList_1.default, { showZebraRows: false, className: !props.useAgGridStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
};
exports.ListBoxFilterForm = ListBoxFilterForm;
