import React, { useEffect } from 'react';
import { ERoleCode, FILTER_BY } from '../constant';
import TableCustomList from './table-custom-list';
import { PHXBannerWithCard } from '../../BannerWithCard/BannerWithCard';
import { PHXCombobox } from '../../Combobox';
import { PHXCheckbox } from '../../Checkbox';
export function CheckboxGroup({ errors, handleChangeFilter, listRadio, listTargetSelected, schoolYearId, selectOptions, target, }) {
    const current = listTargetSelected.find((i) => i.target === target);
    const filters = (current === null || current === void 0 ? void 0 : current.filter) || [];
    const isDepartmentOrStaff = target === ERoleCode.DEPARTMENT || target === ERoleCode.STAFF;
    const isAllDepartmentChecked = filters.some((f) => f.filterBy === FILTER_BY.ALL) && isDepartmentOrStaff;
    const isAllChecked = filters.some((f) => f.filterBy === FILTER_BY.ALL && !isDepartmentOrStaff);
    useEffect(() => {
        if (isAllChecked) {
            const firstRadio = listRadio[0];
            if (!firstRadio || firstRadio.value === FILTER_BY.CUSTOM_LIST)
                return;
            handleChangeFilter(target, true, {
                filterBy: firstRadio.value,
                filterValues: selectOptions[firstRadio.value],
            });
        }
    }, [isAllChecked]);
    return (React.createElement("div", { className: 'ml-7 space-y-2' }, listRadio.map((radio, index) => {
        var _a, _b, _c, _d, _e, _f;
        const { title, value } = radio;
        const existing = filters.find((f) => f.filterBy === value);
        const isChecked = !!existing;
        const isHaveCombobox = isChecked && value !== FILTER_BY.CUSTOM_LIST && target !== ERoleCode.STAFF && value !== FILTER_BY.ALL;
        const haveError = !!((_b = (_a = errors === null || errors === void 0 ? void 0 : errors[index]) === null || _a === void 0 ? void 0 : _a.filterValues) === null || _b === void 0 ? void 0 : _b.message);
        return (React.createElement("div", { key: value, className: 'space-y-2' },
            React.createElement(PHXCheckbox, { checked: isChecked, disabled: isAllDepartmentChecked && value !== FILTER_BY.ALL, error: haveError, id: `${target}-${value}`, onChange: (val) => {
                    handleChangeFilter(target, val.target.checked, {
                        filterBy: value,
                        filterValues: [],
                    });
                }, title: title }),
            value === FILTER_BY.CUSTOM_LIST && isChecked && (React.createElement("div", null,
                haveError && (React.createElement(PHXBannerWithCard, { className: 'mb-3 ml-6', description: (_d = (_c = errors === null || errors === void 0 ? void 0 : errors[index]) === null || _c === void 0 ? void 0 : _c.filterValues) === null || _d === void 0 ? void 0 : _d.message, hideCloseButton: true, show: true, type: 'danger' })),
                React.createElement(TableCustomList, { defaultData: (existing === null || existing === void 0 ? void 0 : existing.filterValues) || [], handleChange: (data) => {
                        handleChangeFilter(target, true, {
                            filterBy: value,
                            filterValues: data,
                        });
                    }, schoolYearId: schoolYearId, target: target }))),
            isHaveCombobox && (React.createElement(PHXCombobox, { className: 'ml-6', defaultValue: (existing === null || existing === void 0 ? void 0 : existing.filterValues) || [], error: haveError, errorMessageCustom: (_f = (_e = errors === null || errors === void 0 ? void 0 : errors[index]) === null || _e === void 0 ? void 0 : _e.filterValues) === null || _f === void 0 ? void 0 : _f.message, errorType: 'custom-message', listOptions: selectOptions[value] || [], onChange: (selected) => handleChangeFilter(target, true, {
                    filterBy: value,
                    filterValues: selected,
                }), placeholder: 'L\u1EF1a ch\u1ECDn', selectFieldPosition: target === ERoleCode.DEPARTMENT ? 'top' : 'bottom' }))));
    })));
}
//# sourceMappingURL=radio-group-select.js.map