import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { ChevronRightIcon } from '../../../../lib/icons/ChevronRight.js';
import { InfoBlueIcon } from '../../../../lib/icons/InfoBlue.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 { useManufacturer } from '../../../../lib/seam/components/SupportedDeviceTable/use-manufacturer.js';
import { useToggle } from '../../../../lib/ui/use-toggle.js';
/**
 * How many device models required before collapsing the list,
 * and requiring the user to click to view all.
 */
const maxDevicesBeforeCollapsing = 3;
export function SupportedDeviceManufacturerSection({ manufacturerId, deviceModels, }) {
    const { manufacturer } = useManufacturer({ manufacturer_id: manufacturerId });
    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-manufacturer-section', {
            'can-expand': canExpand,
            expanded,
        }), children: [_jsxs("div", { className: 'seam-header', onClick: handleHeaderClick, children: [_jsx("img", { src: manufacturer?.logo?.url, alt: manufacturer?.display_name, className: 'seam-manufacturer-image' }), _jsxs("h5", { className: 'seam-manufacturer-name', children: [manufacturer?.display_name, " ", t.devices] }), canExpand && _jsx(ChevronRightIcon, { className: 'chevron' })] }), manufacturer?.annotations.map((annotation, idx) => (_jsx(ManufacturerAnnotationBox, { annotation: annotation }, [annotation.annotation_code, idx].join('_')))), _jsx("div", { className: 'seam-supported-device-table-content', children: visibleDevices.map((deviceModel) => (_jsx(SupportedDeviceRow, { deviceModel: deviceModel }, deviceModel.device_model_id))) }), _jsx(ShowAllDevicesButton, { visible: canExpand, onClick: toggleExpand, expanded: expanded, totalDeviceCount: deviceModels.length }), _jsx(HiddenDevicesOverlay, { visible: canExpand && !expanded })] }));
}
function ManufacturerAnnotationBox({ annotation, }) {
    return (_jsxs("div", { className: 'seam-manufacturer-annotation-box', children: [_jsx(InfoBlueIcon, {}), _jsx("p", { className: 'seam-annotation', children: annotation.message })] }));
}
const t = {
    devices: 'Devices',
};
//# sourceMappingURL=SupportedDeviceManufacturerSection.js.map