import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { SupportedDeviceBrandSection } from '../../../../lib/seam/components/SupportedDeviceTable/SupportedDeviceBrandSection.js';
import { SupportedDeviceFilterResultRow } from '../../../../lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRow.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, brands, excludedBrands, }) {
    const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels({
        filterValue,
        filters,
        brands,
        excludedBrands,
    });
    if (isLoading) {
        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 }) }));
    }
    const hasFilters = filterValue.trim() !== '' || filters.brand !== null;
    if (hasFilters) {
        return (_jsx("div", { className: 'seam-supported-device-table-content', children: deviceModels.map((deviceModel, index) => (_jsx(SupportedDeviceFilterResultRow, { deviceModel: deviceModel }, [
                deviceModel.main_category,
                deviceModel.brand,
                deviceModel.model_name,
                deviceModel.manufacturer_model_id,
                index,
            ].join(':')))) }));
    }
    return (_jsx(_Fragment, { children: Object.entries(groupDeviceModelsByBrand(deviceModels)).map(([brand, models]) => (_jsx(SupportedDeviceBrandSection, { brand: brand, deviceModels: models }, brand))) }));
}
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 }) }) }));
}
function groupDeviceModelsByBrand(deviceModels) {
    const result = {};
    for (const model of deviceModels) {
        const { brand } = model;
        const list = result[brand] ?? [];
        result[brand] = [...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