import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from 'classnames';
import { useCallback, useMemo, useState } from 'react';
import { isLockDevice, isThermostatDevice } from 'seamapi';
import { useComponentTelemetry } from '../../../../lib/telemetry/index.js';
import { compareByCreatedAtDesc } from '../../../../lib/dates.js';
import { withRequiredCommonProps, } from '../../../../lib/seam/components/common-props.js';
import { NestedDeviceDetails } from '../../../../lib/seam/components/DeviceDetails/DeviceDetails.js';
import { DeviceHealthBar, } from '../../../../lib/seam/components/DeviceTable/DeviceHealthBar.js';
import { DeviceRow } from '../../../../lib/seam/components/DeviceTable/DeviceRow.js';
import { useDevices, } from '../../../../lib/seam/devices/use-devices.js';
import { ContentHeader } from '../../../../lib/ui/layout/ContentHeader.js';
import { EmptyPlaceholder } from '../../../../lib/ui/Table/EmptyPlaceholder.js';
import { TableBody } from '../../../../lib/ui/Table/TableBody.js';
import { TableHeader } from '../../../../lib/ui/Table/TableHeader.js';
import { TableTitle } from '../../../../lib/ui/Table/TableTitle.js';
import { SearchTextField } from '../../../../lib/ui/TextField/SearchTextField.js';
import { Caption } from '../../../../lib/ui/typography/Caption.js';
export const defaultDeviceFilter = (device, searchInputValue) => {
    const value = searchInputValue.trim();
    if (value === '')
        return true;
    return device.properties.name.toLowerCase().includes(value);
};
export const NestedDeviceTable = withRequiredCommonProps(DeviceTable);
export function DeviceTable({ deviceIds, connectedAccountIds, disableSearch = false, onDeviceClick = () => { }, preventDefaultOnDeviceClick = false, deviceFilter = defaultDeviceFilter, deviceComparator = compareByCreatedAtDesc, heading = t.devices, title = t.devices, disableLockUnlock = false, disableCreateAccessCode = false, disableEditAccessCode = false, disableDeleteAccessCode = false, onBack, className, } = {}) {
    useComponentTelemetry('DeviceTable');
    const { devices, isLoading, isError, error } = useDevices({
        device_ids: deviceIds,
        connected_account_ids: connectedAccountIds,
    });
    const [selectedDeviceId, setSelectedDeviceId] = useState(null);
    const [searchInputValue, setSearchInputValue] = useState('');
    const filteredDevices = useMemo(() => devices
        ?.filter((device) => isLockDevice(device) || isThermostatDevice(device))
        ?.filter((device) => deviceFilter(device, searchInputValue))
        ?.sort(deviceComparator) ?? [], [devices, searchInputValue, deviceFilter, deviceComparator]);
    const handleDeviceClick = useCallback((deviceId) => {
        onDeviceClick(deviceId);
        if (preventDefaultOnDeviceClick)
            return;
        setSelectedDeviceId(deviceId);
    }, [onDeviceClick, preventDefaultOnDeviceClick, setSelectedDeviceId]);
    if (selectedDeviceId != null) {
        return (_jsx(NestedDeviceDetails, { deviceId: selectedDeviceId, disableLockUnlock: disableLockUnlock, disableCreateAccessCode: disableCreateAccessCode, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: disableDeleteAccessCode, onBack: () => {
                setSelectedDeviceId(null);
            }, className: className }));
    }
    if (isLoading) {
        return _jsx("p", { className: className, children: "..." });
    }
    if (isError) {
        return _jsx("p", { className: className, children: error?.message });
    }
    return (_jsxs("div", { className: classNames('seam-device-table', className), children: [_jsx(ContentHeader, { onBack: onBack }), _jsxs(TableHeader, { children: [title != null ? (_jsxs(TableTitle, { children: [heading ?? title ?? t.devices, ' ', _jsxs(Caption, { children: ["(", filteredDevices.length, ")"] })] })) : (_jsx("div", { className: 'seam-fragment' })), !disableSearch && (_jsx(SearchTextField, { value: searchInputValue, onChange: setSearchInputValue, disabled: (devices?.length ?? 0) === 0 }))] }), _jsx(TableBody, { children: _jsx(Content, { devices: filteredDevices, onDeviceClick: handleDeviceClick }) })] }));
}
function Content(props) {
    const { devices, onDeviceClick } = props;
    const [filter, setFilter] = useState(null);
    if (devices.length === 0) {
        return _jsx(EmptyPlaceholder, { children: t.noDevicesMessage });
    }
    const filteredDevices = devices.filter((device) => {
        if (filter === null) {
            return true;
        }
        if (filter === 'account_issues') {
            return (device.errors.filter((error) => 'is_connected_account_error' in error)
                .length > 0);
        }
        if (filter === 'device_issues') {
            return (device.errors.filter((error) => 'is_device_error' in error).length > 0);
        }
        return true;
    });
    return (_jsxs(_Fragment, { children: [_jsx(DeviceHealthBar, { devices: devices, filter: filter, onFilterSelect: setFilter }), filteredDevices.map((device) => (_jsx(DeviceRow, { device: device, onClick: () => {
                    onDeviceClick(device.device_id);
                } }, device.device_id)))] }));
}
const t = {
    devices: 'Devices',
    noDevicesMessage: 'Sorry, no devices were found',
};
//# sourceMappingURL=DeviceTable.js.map