import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { useDevice } from '../../../../lib/seam/devices/use-device.js';
import { isLockDevice } from '../../../../lib/seam/locks/lock-device.js';
import { useToggleLock } from '../../../../lib/seam/locks/use-toggle-lock.js';
import { Button } from '../../../../lib/ui/Button.js';
import { DeviceImage } from '../../../../lib/ui/device/DeviceImage.js';
import { Snackbar } from '../../../../lib/ui/Snackbar/Snackbar.js';
import { TextButton } from '../../../../lib/ui/TextButton.js';
export function AccessCodeDevice({ deviceId, disableLockUnlock, onSelectDevice, }) {
    const { isPending, device } = useDevice({
        device_id: deviceId,
    });
    if (isPending) {
        return null;
    }
    if (device == null) {
        return null;
    }
    if (!isLockDevice(device)) {
        return null;
    }
    if (device.can_program_online_access_codes == null) {
        return null;
    }
    return (_jsx(Content, { device: device, disableLockUnlock: disableLockUnlock, onSelectDevice: onSelectDevice }));
}
function Content(props) {
    const { device, disableLockUnlock, onSelectDevice } = props;
    const [snackbarVisible, setSnackbarVisible] = useState(false);
    const [snackbarVariant, setSnackbarVariant] = useState('success');
    const toggleLock = useToggleLock({
        onSuccess: () => {
            setSnackbarVisible(true);
            setSnackbarVariant('success');
        },
        onError: () => {
            setSnackbarVisible(true);
            setSnackbarVariant('error');
        },
    });
    const toggleLockLabel = device.properties.locked ? t.unlock : t.lock;
    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: 'seam-access-code-device', children: [_jsx("div", { className: 'seam-device-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-body', children: [_jsx("div", { children: device.properties.name }), _jsx(TextButton, { onClick: () => {
                                    onSelectDevice(device.device_id);
                                }, children: t.deviceDetails })] }), !disableLockUnlock && device.properties.online && (_jsx(Button, { onClick: () => {
                            toggleLock.mutate(device);
                        }, children: toggleLockLabel }))] })] }));
}
const t = {
    deviceDetails: 'Device details',
    unlock: 'Unlock',
    lock: 'Lock',
    successfullyUpdated: 'Lock status has been successfully updated',
    failedToUpdate: 'Failed to update lock status',
};
//# sourceMappingURL=AccessCodeDevice.js.map