import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { DateTime } from 'luxon';
import { useState } from 'react';
import { useComponentTelemetry } from '../../../../lib/telemetry/index.js';
import { CopyIcon } from '../../../../lib/icons/Copy.js';
import { useAccessCode } from '../../../../lib/seam/access-codes/use-access-code.js';
import { useDeleteAccessCode } from '../../../../lib/seam/access-codes/use-delete-access-code.js';
import { AccessCodeDevice } from '../../../../lib/seam/components/AccessCodeDetails/AccessCodeDevice.js';
import { withRequiredCommonProps, } from '../../../../lib/seam/components/common-props.js';
import { NestedDeviceDetails } from '../../../../lib/seam/components/DeviceDetails/DeviceDetails.js';
import { Alerts } from '../../../../lib/ui/Alert/Alerts.js';
import { Button } from '../../../../lib/ui/Button.js';
import { copyToClipboard } from '../../../../lib/ui/clipboard.js';
import { IconButton } from '../../../../lib/ui/IconButton.js';
import { ContentHeader } from '../../../../lib/ui/layout/ContentHeader.js';
import { useIsDateInPast } from '../../../../lib/ui/use-is-date-in-past.js';
export const NestedAccessCodeDetails = withRequiredCommonProps(AccessCodeDetails);
export function AccessCodeDetails({ accessCodeId, onEdit, disableCreateAccessCode = false, disableEditAccessCode = false, disableLockUnlock = false, disableDeleteAccessCode = false, onBack, className, }) {
    useComponentTelemetry('AccessCodeDetails');
    const { accessCode } = useAccessCode(accessCodeId);
    const [selectedDeviceId, selectDevice] = useState(null);
    const { mutate: deleteCode, isLoading: isDeleting } = useDeleteAccessCode();
    if (accessCode == null) {
        return null;
    }
    const name = accessCode.name ?? t.fallbackName;
    if (selectedDeviceId != null) {
        return (_jsx(NestedDeviceDetails, { deviceId: selectedDeviceId, disableLockUnlock: disableLockUnlock, disableCreateAccessCode: disableCreateAccessCode, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: disableDeleteAccessCode, onBack: () => {
                selectDevice(null);
            }, className: className }));
    }
    const alerts = [
        ...accessCode.errors.filter(errorFilter).map((error) => ({
            variant: 'error',
            message: error.message,
        })),
        ...accessCode.warnings.map((warning) => ({
            variant: 'warning',
            message: warning.message,
        })),
    ];
    return (_jsxs("div", { className: classNames('seam-access-code-details', className), children: [_jsx(ContentHeader, { title: 'Access code', onBack: onBack }), _jsxs("div", { className: 'seam-summary', children: [_jsxs("div", { className: classNames('seam-top', alerts.length > 0 && 'seam-top-has-alerts'), children: [_jsx("span", { className: 'seam-label', children: t.accessCode }), _jsx("h5", { className: 'seam-access-code-name', children: name }), _jsxs("div", { className: 'seam-code', children: [_jsx("span", { children: accessCode.code }), _jsx(IconButton, { onClick: () => {
                                            void copyToClipboard(accessCode.code ?? '');
                                        }, children: _jsx(CopyIcon, {}) })] }), _jsx("div", { className: 'seam-duration', children: _jsx(Duration, { accessCode: accessCode }) })] }), _jsx(Alerts, { alerts: alerts, className: 'seam-alerts-padded' }), _jsx(AccessCodeDevice, { deviceId: accessCode.device_id, disableLockUnlock: disableLockUnlock, onSelectDevice: selectDevice })] }), (!disableEditAccessCode || !disableDeleteAccessCode) && (_jsxs("div", { className: 'seam-actions', children: [!disableEditAccessCode && (_jsx(Button, { size: 'small', onClick: onEdit, disabled: isDeleting, children: t.editCode })), !disableDeleteAccessCode && (_jsx(Button, { size: 'small', onClick: () => {
                            deleteCode({ access_code_id: accessCode.access_code_id });
                        }, disabled: isDeleting, children: t.deleteCode }))] })), _jsxs("div", { className: 'seam-details', children: [_jsxs("div", { className: 'seam-row', children: [_jsxs("div", { className: 'seam-heading', children: [t.id, ":"] }), _jsxs("div", { className: 'seam-content seam-code-id', children: [_jsx("span", { children: accessCode.access_code_id }), _jsx(IconButton, { onClick: () => {
                                            void copyToClipboard(accessCode.access_code_id);
                                        }, children: _jsx(CopyIcon, {}) })] })] }), _jsxs("div", { className: 'seam-row', children: [_jsxs("div", { className: 'seam-heading', children: [t.created, ":"] }), _jsx("div", { className: 'seam-content', children: formatDate(accessCode.created_at) })] }), _jsxs("div", { className: 'seam-row seam-schedule', children: [_jsxs("div", { className: 'seam-heading', children: [t.timing, ":"] }), _jsx("div", { className: 'seam-content', children: _jsx(ScheduleInfo, { accessCode: accessCode }) })] })] })] }));
}
function ScheduleInfo({ accessCode }) {
    if (accessCode.type === 'ongoing') {
        return _jsx("span", { children: t.ongoing });
    }
    return (_jsxs("div", { className: 'seam-times', children: [_jsxs("div", { children: [_jsx("div", { className: 'seam-label', children: t.start }), _jsx("div", { className: 'seam-date', children: formatDate(accessCode.starts_at) }), _jsx("div", { className: 'seam-time', children: formatTime(accessCode.starts_at) })] }), _jsxs("div", { children: [_jsx("div", { className: 'seam-label', children: t.end }), _jsx("div", { className: 'seam-date', children: formatDate(accessCode.ends_at) }), _jsx("div", { className: 'seam-time', children: formatTime(accessCode.ends_at) })] })] }));
}
function Duration(props) {
    const { accessCode } = props;
    const hasStarted = useIsDateInPast('starts_at' in accessCode ? accessCode?.starts_at : null) ??
        false;
    if (accessCode.type === 'ongoing') {
        return (_jsxs("span", { children: [_jsx("span", { className: 'seam-label', children: "Active" }), " (ongoing)"] }));
    }
    if (hasStarted) {
        return (_jsxs("span", { children: [_jsx("span", { className: 'seam-label', children: "Active" }), " until", ' ', formatDurationDate(accessCode.ends_at), " at", ' ', formatTime(accessCode.ends_at)] }));
    }
    return (_jsxs("span", { children: ["Starts ", formatDurationDate(accessCode.starts_at), " as", ' ', formatTime(accessCode.starts_at)] }));
}
function formatDurationDate(date) {
    return DateTime.fromISO(date).toLocaleString({
        month: 'short',
        day: 'numeric',
    });
}
function formatTime(date) {
    return DateTime.fromISO(date).toLocaleString({
        hour: 'numeric',
        minute: '2-digit',
    });
}
function formatDate(date) {
    return DateTime.fromISO(date).toLocaleString({
        weekday: 'short',
        month: 'long',
        day: 'numeric',
        year: 'numeric',
    });
}
const errorFilter = (error) => {
    if ('is_access_code_error' in error && !error.is_access_code_error)
        return true;
    if (error.error_code === 'failed_to_set_on_device' ||
        error.error_code === 'failed_to_remove_on_device') {
        return true;
    }
    return false;
};
const t = {
    accessCode: 'Access code',
    fallbackName: 'Code',
    id: 'ID',
    created: 'Created',
    timing: 'Timing',
    ongoing: 'Ongoing',
    start: 'Start',
    end: 'End',
    editCode: 'Edit code',
    deleteCode: 'Delete code',
};
//# sourceMappingURL=AccessCodeDetails.js.map