//
// Copyright 2025 DXOS.org
//
import React, { useMemo } from 'react';
import { Format } from '@dxos/echo/internal';
import { Device, DeviceKind, DeviceType, useDevices } from '@dxos/react-client/halo';
import { MasterDetailTable, PanelContainer } from '../../../components';
export const DeviceListPanel = () => {
    const devices = useDevices();
    const properties = useMemo(() => [
        { name: 'key', format: Format.TypeFormat.DID },
        {
            name: 'state',
            format: Format.TypeFormat.SingleSelect,
            size: 150,
            config: {
                options: [
                    { id: 'THIS DEVICE', title: 'THIS DEVICE', color: 'green' },
                    { id: 'ONLINE', title: 'ONLINE', color: 'green' },
                    { id: 'OFFLINE', title: 'OFFLINE', color: 'neutral' },
                ],
            },
        },
        {
            name: 'type',
            format: Format.TypeFormat.SingleSelect,
            size: 180,
            config: {
                options: Object.entries(DeviceType)
                    .filter(([key]) => isNaN(Number(key)))
                    .map(([key]) => ({ id: key, title: key, color: 'neutral' })),
            },
        },
        { name: 'label', format: Format.TypeFormat.String, size: 180 },
    ], []);
    const data = useMemo(() => devices.map((device) => ({
        id: device.deviceKey.toString(),
        key: device.deviceKey.toString(),
        state: device.kind === DeviceKind.CURRENT ? 'THIS DEVICE' : Device.PresenceState[device.presence],
        type: DeviceType[device.profile?.type || DeviceType.UNKNOWN],
        label: device.profile?.label,
        _original: device,
    })), [devices]);
    return (React.createElement(PanelContainer, null,
        React.createElement(MasterDetailTable, { properties: properties, data: data, detailsTransform: (d) => d._original, detailsPosition: 'bottom' })));
};
//# sourceMappingURL=DeviceListPanel.js.map