import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useMemo } from 'react';
import Button, { ButtonAnchor } from '../../components/atoms/Button.mjs';
import CodeContainer from '../../components/atoms/CodeContainer.mjs';
import Column from '../../components/atoms/Column.mjs';
import { errorToast } from '../../components/atoms/Toast.mjs';
import Typography from '../../components/atoms/Typography.mjs';
import VerticalTransition, { useTimedBoolean } from '../../components/atoms/VerticalTransition.mjs';
import ButtonColumn from '../../components/molecules/ButtonColumn.mjs';
import TextColumn from '../../components/molecules/TextColumn.mjs';
import { useGlobalReducer } from '../GlobalContextProvider.mjs';
import modules_18162161 from './RecoveryCodeSaveScreen.module.css.mjs';

const RecoveryCodeSaveScreen = ()=>{
    const [state, dispatch] = useGlobalReducer();
    const { i18n: $__i18n, _: $__ } = useLingui();
    // This screen should only be shown if TOTP enrollment is available
    const { recoveryCodes } = state.mfa.totp.enrollment;
    const handleContinue = ()=>{
        dispatch({
            type: 'recovery_code/save_acknowledge'
        });
    };
    const fileContent = useMemo(()=>{
        const newline = navigator.platform === 'Win32' ? '\r\n' : '\n';
        const blob = new Blob([
            recoveryCodes.join(newline)
        ], {
            type: 'text/plain'
        });
        return URL.createObjectURL(blob);
    }, [
        recoveryCodes
    ]);
    const organizationName = state.flowState.organization?.organization_name;
    const filename = organizationName ? $__i18n._({
        id: "recoveryCodes.filename.withOrganizationName",
        message: "{organizationName}-backup-codes",
        values: {
            organizationName: organizationName
        }
    }) : $__i18n._({
        id: "recoveryCodes.filename.noOrganizationName",
        message: "backup-codes"
    });
    const [copied, setCopied] = useTimedBoolean(3);
    const handleCodesCopy = async ()=>{
        try {
            await navigator.clipboard.writeText(recoveryCodes.join('\n'));
            setCopied(true);
        } catch  {
            errorToast({
                message: $__i18n._({
                    id: "recoveryCodes.save.toast.copyFailed",
                    message: "Couldn't copy codes to clipboard"
                })
            });
        }
    };
    const maxCodeLength = Math.max(...recoveryCodes.map((code)=>code.length));
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ React__default.createElement(TextColumn, {
        header: $__i18n._({
            id: "recoveryCodes.save.title",
            message: "Save your backup codes!"
        }),
        body: $__i18n._({
            id: "recoveryCodes.save.content",
            message: "This is the only time you will be able to access and save your backup codes."
        })
    }), /*#__PURE__*/ React__default.createElement(CodeContainer, null, /*#__PURE__*/ React__default.createElement(Typography, {
        font: "mono"
    }, /*#__PURE__*/ React__default.createElement("ul", {
        className: modules_18162161.codes,
        style: {
            '--st-max-code-length': maxCodeLength + 'ch'
        }
    }, recoveryCodes.map((code, i)=>/*#__PURE__*/ React__default.createElement("li", {
            key: i
        }, code))))), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
        variant: "primary",
        href: fileContent,
        download: filename + '.txt'
    }, /*#__PURE__*/ React__default.createElement(VerticalTransition, {
        primary: $__i18n._({
            id: "recoveryCodes.save.button.download",
            message: "Download .txt file"
        }),
        secondary: $__i18n._({
            id: "recoveryCodes.save.button.copied",
            message: "Copied!"
        }),
        triggered: copied
    })), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "outline",
        onClick: handleCodesCopy
    }, $__i18n._({
        id: "recoveryCodes.save.button.copyAll",
        message: "Copy all to clipboard"
    })), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "ghost",
        onClick: handleContinue
    }, $__i18n._({
        id: "recoveryCodes.save.button.done",
        message: "Done"
    }))));
};

export { RecoveryCodeSaveScreen };
//# sourceMappingURL=RecoveryCodeSaveScreen.mjs.map
