import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FilterCategoryMenu } from '../../../../lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.js';
import { useDeviceModels } from '../../../../lib/seam/device-models/use-device-models.js';
import { capitalize } from '../../../../lib/strings.js';
import { Button } from '../../../../lib/ui/Button.js';
import { Menu } from '../../../../lib/ui/Menu/Menu.js';
import { SearchTextField } from '../../../../lib/ui/TextField/SearchTextField.js';
export function SupportedDeviceFilterArea({ filterValue, setFilterValue, filters, setFilters, brands, excludedBrands, }) {
    const appliedFiltersCount = getAppliedFilterCount(filters);
    const availableBrands = useAvailableBrands(brands, excludedBrands);
    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.brand, allLabel: allLabel, options: availableBrands, onSelect: (brand) => {
                                            setFilters((filters) => ({
                                                ...filters,
                                                brand,
                                            }));
                                        }, buttonLabel: filters.brand ?? allLabel, onAllOptionSelect: () => {
                                            resetFilter('brand');
                                        } }) }), _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.brand !== null)
        count++;
    if (!filters.supportedOnly)
        count++;
    return count;
};
const useAvailableBrands = (brands, excludedBrands) => {
    const { deviceModels } = useDeviceModels();
    if (deviceModels == null)
        return [];
    const availableBrands = deviceModels
        .map(({ brand }) => brand.trim())
        .filter((brand) => {
        // UPSTREAM: API can return an empty value for brand.
        return brand !== '';
    })
        .filter((brand) => {
        if (brands === null)
            return true;
        return brands.includes(brand);
    })
        .filter((brand) => {
        return !excludedBrands.includes(brand);
    })
        .map((brand) => capitalize(brand));
    return Array.from(new Set(availableBrands));
};
const t = {
    all: 'All',
    brand: 'Brand',
    supported: 'Supported',
    filter: 'Filter',
    filters: 'Filters',
};
//# sourceMappingURL=SupportedDeviceFilterArea.js.map