import React, { useCallback, useMemo } from 'react';
import { defaultTo, filter, find, pipe, pluck, prop } from 'ramda';
import i18n from 'ui-i18n';
import { DEFAULT_ENTITY_TYPE_GROUP } from '@reltio/mdm-sdk';
import Checkbox from '@mui/material/Checkbox';
import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
import { EntityTypesList } from '../EntityTypesList';
import styles from './EntityTypesFacetGroups.module.css';
export var EntityTypesFacetGroups = function (_a) {
    var groups = _a.groups, values = _a.values, maxRowCount = _a.maxRowCount, showAll = _a.showAll, onChange = _a.onChange, countFormatter = _a.countFormatter;
    var shouldUseAllItems = !countFormatter;
    var handleCheckboxChange = useCallback(function (groupValues) { return function (e) {
        var newValues = e.target.checked
            ? values.concat(groupValues.filter(function (v) { return !values.includes(v); }))
            : values.filter(function (v) { return !groupValues.includes(v); });
        onChange(newValues);
    }; }, [onChange, values]);
    var groupedItemsToRender = useMemo(function () {
        if (showAll)
            return groups;
        var count = 0;
        return groups
            .map(function (group) {
            if (count >= maxRowCount)
                return null;
            var remaining = maxRowCount - count;
            var limitedItems = group.items.slice(0, remaining);
            count += limitedItems.length;
            return limitedItems.length ? { label: group.label, items: limitedItems } : null;
        })
            .filter(Boolean);
    }, [groups, showAll, maxRowCount]);
    var renderGroup = function (_a) {
        var label = _a.label, items = _a.items;
        var allItems = pipe(find(function (group) { return group.label === label; }), defaultTo({ label: label, items: [] }), prop('items'))(groups);
        var availableValuesWithCount = pipe(filter(function (item) { return (item.number && item.number > 0) || values.includes(item.value); }), pluck('value'))(allItems);
        var availableValues = shouldUseAllItems ? pluck('value', allItems) : availableValuesWithCount;
        var checkedCount = availableValues.filter(function (v) { return values.includes(v); }).length;
        var allChecked = checkedCount === availableValues.length && availableValues.length > 0;
        var someChecked = checkedCount > 0 && checkedCount < availableValues.length;
        return (React.createElement(React.Fragment, null,
            React.createElement("div", { className: styles.groupHeader },
                React.createElement(Checkbox, { className: styles.groupCheckbox, checked: allChecked, indeterminate: someChecked, onChange: handleCheckboxChange(availableValues), disabled: availableValues.length === 0 }),
                label !== DEFAULT_ENTITY_TYPE_GROUP && React.createElement(LocalOfferOutlinedIcon, { className: styles.groupIcon }),
                React.createElement("span", { className: styles.groupLabel }, label === DEFAULT_ENTITY_TYPE_GROUP ? i18n.text('Other') : label)),
            React.createElement(EntityTypesList, { data: items, values: values, onChange: onChange, countFormatter: countFormatter })));
    };
    return groups.length === 1 && groups[0].label === DEFAULT_ENTITY_TYPE_GROUP ? (React.createElement(EntityTypesList, { data: groupedItemsToRender[0].items, values: values, onChange: onChange, countFormatter: countFormatter })) : (React.createElement(React.Fragment, null, groupedItemsToRender.map(function (group) { return (React.createElement("div", { key: group.label }, renderGroup(group))); })));
};
