import React, { useCallback } from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import { identity } from 'ramda';
import Checkbox from '@mui/material/Checkbox';
import { ColorBar } from '../../../ColorBar';
import styles from './EntityTypesList.module.css';
export var EntityTypesList = function (_a) {
    var _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.values, values = _c === void 0 ? [] : _c, _d = _a.onChange, onChange = _d === void 0 ? identity : _d, countFormatter = _a.countFormatter;
    var shouldShowCount = !!countFormatter;
    var handleItemClick = function (name) { return function () {
        var newValues = values.includes(name) ? values.filter(function (val) { return val !== name; }) : values.concat(name);
        onChange(newValues);
    }; };
    var maxNumber = Math.max.apply(Math, data.map(function (item) { return item.number; }));
    var createControl = function (item) {
        var _a;
        return (React.createElement(Checkbox, { className: classnames(styles.checkbox, (_a = {}, _a[styles.checked] = values.includes(item.value), _a)), checked: values.includes(item.value), onChange: handleItemClick(item.value), value: item.value, color: "primary" }));
    };
    var createColorBar = function (item) {
        var _a;
        return (React.createElement(ColorBar, { className: classnames((_a = {}, _a[styles.checkedBar] = values.includes(item.value), _a)), width: item.number, maxWidth: maxNumber }));
    };
    var shouldDisableItem = useCallback(function (item) {
        return shouldShowCount && !item.number && !values.includes(item.value);
    }, [shouldShowCount, values]);
    return (React.createElement("div", { className: styles.listContainer }, data.map(function (item) {
        var _a;
        return (React.createElement("div", { key: item.value, className: classnames(styles.item, (_a = {},
                _a[styles.disabled] = shouldDisableItem(item),
                _a)), "data-reltio-id": "search-facets-list-row" },
            createControl(item),
            React.createElement("div", { className: styles.info, onClick: handleItemClick(item.value) },
                shouldShowCount && createColorBar(item),
                React.createElement("div", { className: classnames(styles.textInfo) },
                    React.createElement("div", { className: styles.text }, item.label),
                    shouldShowCount && (React.createElement("div", { className: styles.count }, item.number === undefined ? i18n.text('N/A') : countFormatter(item.number)))))));
    })));
};
