import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { ChevronRightIcon } from '../../../../lib/icons/ChevronRight.js';
import { useAccessCodes } from '../../../../lib/seam/access-codes/use-access-codes.js';
import { NestedAccessCodeTable } from '../../../../lib/seam/components/AccessCodeTable/AccessCodeTable.js';
import { DeviceModel } from '../../../../lib/seam/components/DeviceDetails/DeviceModel.js';
import { useToggleLock } from '../../../../lib/seam/devices/use-toggle-lock.js';
import { Alerts } from '../../../../lib/ui/Alert/Alerts.js';
import { Button } from '../../../../lib/ui/Button.js';
import { BatteryStatus } from '../../../../lib/ui/device/BatteryStatus.js';
import { DeviceImage } from '../../../../lib/ui/device/DeviceImage.js';
import { OnlineStatus } from '../../../../lib/ui/device/OnlineStatus.js';
import { ContentHeader } from '../../../../lib/ui/layout/ContentHeader.js';
import { useToggle } from '../../../../lib/ui/use-toggle.js';
export function LockDeviceDetails(props) {
    const { device, disableLockUnlock, disableCreateAccessCode, disableEditAccessCode, disableDeleteAccessCode, onBack, className, } = props;
    const [accessCodesOpen, toggleAccessCodesOpen] = useToggle();
    const toggleLock = useToggleLock(device);
    const { accessCodes } = useAccessCodes({
        device_id: device.device_id,
    });
    const lockStatus = device.properties.locked ? t.locked : t.unlocked;
    const toggleLockLabel = device.properties.locked ? t.unlock : t.lock;
    const accessCodeCount = accessCodes?.length;
    if (accessCodes == null) {
        return null;
    }
    if (accessCodesOpen) {
        return (_jsx(NestedAccessCodeTable, { deviceId: device.device_id, disableLockUnlock: disableLockUnlock, disableCreateAccessCode: disableCreateAccessCode, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: disableDeleteAccessCode, onBack: toggleAccessCodesOpen, className: className }));
    }
    const alerts = [
        ...device.errors.map((error) => ({
            variant: 'error',
            message: error.message,
        })),
        ...device.warnings.map((warning) => ({
            variant: 'warning',
            message: warning.message,
        })),
    ];
    return (_jsxs("div", { className: classNames('seam-device-details', className), children: [_jsx(ContentHeader, { title: 'Device', onBack: onBack }), _jsxs("div", { className: 'seam-body', children: [_jsxs("div", { className: 'seam-summary', children: [_jsxs("div", { className: 'seam-content', children: [_jsx("div", { className: 'seam-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-info', children: [_jsx("span", { className: 'seam-label', children: t.device }), _jsx("h4", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-properties', children: [_jsxs("span", { className: 'seam-label', children: [t.status, ":"] }), ' ', _jsx(OnlineStatus, { device: device }), _jsxs("span", { className: 'seam-label', children: [t.power, ":"] }), ' ', _jsx(BatteryStatus, { device: device }), _jsx(DeviceModel, { device: device })] })] })] }), _jsx(Alerts, { alerts: alerts, className: 'seam-alerts-space-top' })] }), _jsx("div", { className: 'seam-box', children: _jsxs("div", { className: 'seam-content seam-access-codes', onClick: toggleAccessCodesOpen, children: [_jsxs("span", { className: 'seam-value', children: [accessCodeCount, " ", t.accessCodes] }), _jsx(ChevronRightIcon, {})] }) }), _jsxs("div", { className: 'seam-box', children: [_jsxs("div", { className: 'seam-content seam-lock-status', children: [_jsxs("div", { children: [_jsx("span", { className: 'seam-label', children: t.lockStatus }), _jsx("span", { className: 'seam-value', children: lockStatus })] }), _jsx("div", { className: 'seam-right', children: disableLockUnlock !== true && (_jsx(Button, { size: 'small', onClick: () => {
                                                toggleLock.mutate();
                                            }, children: toggleLockLabel })) })] }), _jsx(AccessCodeLength, { supportedCodeLengths: device.properties?.supported_code_lengths ?? [] })] })] })] }));
}
function AccessCodeLength(props) {
    const { supportedCodeLengths } = props;
    if (supportedCodeLengths.length === 0) {
        return null;
    }
    const min = Math.min(...supportedCodeLengths);
    const max = Math.max(...supportedCodeLengths);
    const range = min === max ? max : `${min}–${max}`;
    return (_jsxs("div", { className: 'seam-content seam-access-code-length', children: [_jsx("span", { className: 'seam-label', children: t.codeLength }), _jsxs("span", { className: 'seam-value', children: [range, " ", t.digits] })] }));
}
const t = {
    device: 'Device',
    unlock: 'Unlock',
    lock: 'Lock',
    locked: 'Locked',
    unlocked: 'Unlocked',
    accessCodes: 'access codes',
    codeLength: 'Code length',
    digits: 'digits',
    lockStatus: 'Lock status',
    status: 'Status',
    power: 'Power',
};
//# sourceMappingURL=LockDeviceDetails.js.map