import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { ChevronRightIcon } from '../../../../lib/icons/ChevronRight.js';
import { HiddenDevicesOverlay } from '../../../../lib/seam/components/SupportedDeviceTable/HiddenDevicesOverlay.js';
import { ShowAllDevicesButton } from '../../../../lib/seam/components/SupportedDeviceTable/ShowAllDevicesButton.js';
import { SupportedDeviceRow } from '../../../../lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js';
import { useDeviceProvider } from '../../../../lib/seam/components/SupportedDeviceTable/use-device-provider.js';
import { useToggle } from '../../../../lib/ui/use-toggle.js';
/**
 * How many device models required before we collapse
 * the list, and require the user to click to
 * view all.
 */
const maxDevicesBeforeCollapsing = 3;
export function SupportedDeviceBrandSection({ brand, deviceModels, }) {
    const deviceProvider = useDeviceProvider(brand);
    const [expanded, toggleExpand] = useToggle();
    const canExpand = deviceModels.length > maxDevicesBeforeCollapsing;
    const visibleDevices = !canExpand || expanded
        ? deviceModels
        : deviceModels.filter((_deviceModel, index) => index < maxDevicesBeforeCollapsing);
    const handleHeaderClick = () => {
        if (!canExpand) {
            return;
        }
        toggleExpand();
    };
    return (_jsxs("div", { className: classNames('seam-brand-section', {
            'can-expand': canExpand,
            expanded,
        }), children: [_jsxs("div", { className: 'seam-header', onClick: handleHeaderClick, children: [_jsx("img", { src: deviceProvider.image_url, alt: brand, className: 'seam-brand-image' }), _jsxs("h5", { className: 'seam-brand-name', children: [deviceProvider.display_name, " ", t.devices] }), canExpand && _jsx(ChevronRightIcon, { className: 'chevron' })] }), _jsx("div", { className: 'seam-supported-device-table-content', children: visibleDevices.map((deviceModel, index) => (_jsx(SupportedDeviceRow, { deviceModel: deviceModel }, [
                    deviceModel.main_category,
                    deviceModel.brand,
                    deviceModel.model_name,
                    deviceModel.manufacturer_model_id,
                    index,
                ].join(':')))) }), _jsx(ShowAllDevicesButton, { visible: canExpand, onClick: toggleExpand, expanded: expanded, totalDeviceCount: deviceModels.length }), _jsx(HiddenDevicesOverlay, { visible: canExpand && !expanded })] }));
}
const t = {
    devices: 'Devices',
};
//# sourceMappingURL=SupportedDeviceBrandSection.js.map