import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from 'classnames';
import { useState } from 'react';
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 { DeviceInfo } from '../../../../lib/seam/components/DeviceDetails/DeviceInfo.js';
import { DeviceModel } from '../../../../lib/seam/components/DeviceDetails/DeviceModel.js';
import { deviceErrorFilter, deviceWarningFilter } from '../../../../lib/seam/filters.js';
import { useToggleLock } from '../../../../lib/seam/locks/use-toggle-lock.js';
import { Alerts } from '../../../../lib/ui/Alert/Alerts.js';
import { Button } from '../../../../lib/ui/Button.js';
import { BatteryStatusIndicator } from '../../../../lib/ui/device/BatteryStatusIndicator.js';
import { DeviceImage } from '../../../../lib/ui/device/DeviceImage.js';
import { EditableDeviceName } from '../../../../lib/ui/device/EditableDeviceName.js';
import { OnlineStatus } from '../../../../lib/ui/device/OnlineStatus.js';
import { ContentHeader } from '../../../../lib/ui/layout/ContentHeader.js';
import { Snackbar } from '../../../../lib/ui/Snackbar/Snackbar.js';
import { useToggle } from '../../../../lib/ui/use-toggle.js';
export function LockDeviceDetails({ device, errorFilter, warningFilter, disableLockUnlock, disableCreateAccessCode, disableEditAccessCode, disableDeleteAccessCode, disableResourceIds, disableConnectedAccountInformation, onBack, className, onEditName, }) {
    const [accessCodesOpen, toggleAccessCodesOpen] = useToggle();
    const { accessCodes } = useAccessCodes({
        device_id: device.device_id,
    });
    const [snackbarVisible, setSnackbarVisible] = useState(false);
    const [snackbarVariant, setSnackbarVariant] = useState('success');
    const toggleLock = useToggleLock({
        onSuccess: () => {
            setSnackbarVisible(true);
            setSnackbarVariant('success');
        },
        onError: () => {
            setSnackbarVisible(true);
            setSnackbarVariant('error');
        },
    });
    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, errorFilter: errorFilter, warningFilter: warningFilter, disableLockUnlock: disableLockUnlock, disableCreateAccessCode: disableCreateAccessCode, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: disableDeleteAccessCode, disableResourceIds: disableResourceIds, disableConnectedAccountInformation: disableConnectedAccountInformation, onBack: toggleAccessCodesOpen, className: className }));
    }
    const alerts = [
        ...device.errors
            .filter(deviceErrorFilter)
            .filter(errorFilter)
            .map((error) => ({
            variant: 'error',
            message: error.message,
        })),
        ...device.warnings
            .filter(deviceWarningFilter)
            .filter(warningFilter)
            .map((warning) => ({
            variant: 'warning',
            message: warning.message,
        })),
    ];
    return (_jsxs(_Fragment, { children: [_jsx(Snackbar, { variant: snackbarVariant, visible: snackbarVisible, onClose: () => {
                    setSnackbarVisible(false);
                }, message: snackbarVariant === 'success'
                    ? t.successfullyUpdated
                    : t.failedToUpdate, autoDismiss: true }), _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(EditableDeviceName, { tagName: 'h4', value: device.properties.name, className: 'seam-device-name', onEdit: onEditName }), _jsxs("div", { className: 'seam-properties', children: [_jsxs("span", { className: 'seam-label', children: [t.status, ":"] }), ' ', _jsx(OnlineStatus, { device: device }), device.properties.online && (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'seam-label', children: [t.power, ":"] }), ' ', _jsx(BatteryStatusIndicator, { 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: [device.properties.locked && device.properties.online && (_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 &&
                                                    device.capabilities_supported.includes('lock') && (_jsx(Button, { size: 'small', onClick: () => {
                                                        toggleLock.mutate(device);
                                                    }, children: toggleLockLabel })) })] })), _jsx(AccessCodeLength, { supportedCodeLengths: device.properties?.supported_code_lengths ?? [] })] }), _jsx(DeviceInfo, { device: device, disableConnectedAccountInformation: disableConnectedAccountInformation, disableResourceIds: disableResourceIds })] })] })] }));
}
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',
    successfullyUpdated: 'Lock status has been successfully updated',
    failedToUpdate: 'Failed to update lock status',
};
//# sourceMappingURL=LockDeviceDetails.js.map