import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FilterCategoryMenu } from '../../../../lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.js';
import { supportedIntegrationSupportLevels, } from '../../../../lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js';
import { Button } from '../../../../lib/ui/Button.js';
import { Menu } from '../../../../lib/ui/Menu/Menu.js';
import { SearchTextField } from '../../../../lib/ui/TextField/SearchTextField.js';
import { useFilteredManufacturers } from './use-filtered-manufacturers.js';
export function SupportedDeviceFilterArea({ filterValue, setFilterValue, filters, setFilters, manufacturers, excludedManufacturers, }) {
    const appliedFiltersCount = getAppliedFilterCount(filters);
    const { manufacturers: manufacturersData } = useFilteredManufacturers({
        integrationSupportLevels: filters.supportedOnly
            ? supportedIntegrationSupportLevels
            : null,
        manufacturers,
        excludedManufacturers,
    });
    const resetFilter = (filterType) => {
        setFilters((filters) => ({
            ...filters,
            [filterType]: null,
        }));
    };
    const filterButtonLabel = appliedFiltersCount > 0 ? `${t.filters} (${appliedFiltersCount})` : t.filter;
    const allLabel = t.all;
    return (_jsxs("div", { className: 'seam-supported-device-table-filter-area', children: [_jsx("div", { className: 'seam-deliberate-block' }), _jsxs("div", { className: 'seam-filters-wrap', children: [_jsx(Menu, { renderButton: ({ onOpen }) => (_jsx(Button, { variant: 'outline', className: 'seam-filters-button', onClick: onOpen, children: filterButtonLabel })), children: _jsxs("div", { className: 'seam-supported-device-table-filter-menu', onClick: (event) => {
                                event.stopPropagation();
                            }, children: [_jsx("div", { className: 'seam-filter-menu-row', children: _jsx(FilterCategoryMenu, { label: t.manufacturer, allLabel: allLabel, options: manufacturersData?.map((manufacturer) => manufacturer.display_name) ?? [], onSelect: (manufacturer) => {
                                            setFilters((filters) => ({
                                                ...filters,
                                                manufacturer,
                                            }));
                                        }, buttonLabel: filters.manufacturer ?? allLabel, onAllOptionSelect: () => {
                                            resetFilter('manufacturer');
                                        } }) }), _jsx("div", { className: 'seam-filter-menu-row', children: _jsxs("label", { htmlFor: 'supportedOnly', className: 'seam-filter-checkbox-label', children: [_jsx("p", { children: t.supported }), _jsx("input", { id: 'supportedOnly', name: 'supportedOnly', type: 'checkbox', className: 'seam-filter-checkbox', checked: filters.supportedOnly, onChange: (event) => {
                                                    setFilters((filters) => ({
                                                        ...filters,
                                                        supportedOnly: event.target.checked,
                                                    }));
                                                } })] }) })] }) }), _jsx("div", { className: 'seam-supported-device-table-filter-area-search-bar-wrap', children: _jsx(SearchTextField, { value: filterValue, onChange: (value) => {
                                setFilterValue(value);
                            }, className: 'seam-supported-device-table-filter-area-search-bar' }) })] })] }));
}
const getAppliedFilterCount = (filters) => {
    let count = 0;
    if (filters.manufacturer !== null)
        count++;
    if (!filters.supportedOnly)
        count++;
    return count;
};
const t = {
    all: 'All',
    manufacturer: 'Manufacturer',
    supported: 'Supported',
    filter: 'Filter',
    filters: 'Filters',
};
//# sourceMappingURL=SupportedDeviceFilterArea.js.map