import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo } from 'react';
import { SupportedDeviceManufacturerSection } from '../../../../lib/seam/components/SupportedDeviceTable/SupportedDeviceManufacturerSection.js';
import { useFilteredDeviceModels, } from '../../../../lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js';
import { Button } from '../../../../lib/ui/Button.js';
export function SupportedDeviceContent({ resetFilterValue, filterValue, filters, manufacturers, excludedManufacturers, includeIf, excludeIf, }) {
    const { deviceModels, isPending, isError, refetch } = useFilteredDeviceModels({
        filterValue,
        filters,
        manufacturers,
        excludedManufacturers,
        includeIf,
        excludeIf,
    });
    const groupedDeviceModels = useMemo(() => groupDeviceModelsByManufacturer(deviceModels ?? []), [deviceModels]);
    if (isPending) {
        return (_jsx("div", { className: 'seam-supported-device-table-content-state-block', children: _jsx("p", { children: t.loading }) }));
    }
    if (isError) {
        return (_jsxs("div", { className: 'seam-supported-device-table-content-state-block', children: [_jsx("p", { children: t.error }), _jsx(Button, { variant: 'solid', size: 'small', onClick: () => {
                        void refetch();
                    }, children: t.retry })] }));
    }
    if (deviceModels == null) {
        return null;
    }
    const isEmpty = deviceModels.length === 0;
    if (isEmpty) {
        return (_jsx("div", { className: 'seam-supported-device-table-content', children: _jsx(EmptyResult, { filterValue: filterValue, resetFilterValue: resetFilterValue }) }));
    }
    return (_jsx(_Fragment, { children: Object.entries(groupedDeviceModels)
            .sort((e1, e2) => e1[1][0]?.manufacturer.display_name.localeCompare(e2[1][0]?.manufacturer.display_name ?? '') ?? 0)
            .map(([manufacturerId, models]) => {
            return (_jsx(SupportedDeviceManufacturerSection, { manufacturerId: manufacturerId, deviceModels: models }, manufacturerId));
        }) }));
}
function EmptyResult({ filterValue, resetFilterValue, }) {
    const noMatchingRows = (_jsxs(_Fragment, { children: [_jsx("p", { children: t.noMatch }), _jsx(Button, { variant: 'outline', size: 'small', onClick: resetFilterValue, className: 'seam-supported-device-table-content-message-clear-search', children: t.clear })] }));
    return (_jsx("div", { className: 'seam-supported-device-table-content-message-row', children: _jsx("div", { children: _jsx("div", { className: 'seam-supported-device-table-content-message', children: filterValue.length === 0 ? _jsx("p", { children: t.noneFound }) : noMatchingRows }) }) }));
}
const groupDeviceModelsByManufacturer = (deviceModels) => {
    const result = {};
    for (const model of deviceModels) {
        const { manufacturer } = model;
        const list = result[manufacturer.manufacturer_id] ?? [];
        result[manufacturer.manufacturer_id] = [...list, model];
    }
    return result;
};
const t = {
    loading: 'Loading device models...',
    retry: 'Retry',
    error: 'There was an error fetching device models.',
    noneFound: 'No device models found.',
    noMatch: 'No device models matched your search.',
    clear: 'Clear search terms',
};
//# sourceMappingURL=SupportedDeviceContent.js.map