import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import wn from '../../../../../../node_modules/preact/compat/dist/compat.module.mjs';
import { getTranslatedError } from '../../../utils/getTranslatedError.mjs';
import Button from '../atoms/Button.mjs';
import { chromaticIgnoreClassName } from '../atoms/chromaticIgnoreClassName.mjs';
import Column from '../atoms/Column.mjs';
import { useCountdown, useTimeRemaining } from '../atoms/Countdown.mjs';
import { errorToast } from '../atoms/Toast.mjs';
import Typography from '../atoms/Typography.mjs';
import VerticalTransition from '../atoms/VerticalTransition.mjs';
import ButtonColumn from './ButtonColumn.mjs';
import { useState as h } from '../../../../../../node_modules/preact/hooks/dist/hooks.module.mjs';

/**
 * Handles common layouts for simple email actions
 */ const EmailActionLayout = ({ header, description, children, additionalActions, resend, sendMagicLink, goBack })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const [emailResending, setEmailResending] = h(false);
    const [magicLinkSent, setMagicLinkSent] = h(false);
    const countdown = useCountdown();
    const [timeRemaining, active] = useTimeRemaining(countdown.expiration);
    const resendButton = resend && /*#__PURE__*/ wn.createElement(Button, {
        variant: "outline",
        onClick: async ()=>{
            setEmailResending(true);
            try {
                await resend();
                countdown.start(15);
            } catch (error) {
                errorToast({
                    message: getTranslatedError(error, $__)
                });
                countdown.clear();
            } finally{
                setEmailResending(false);
            }
        },
        loading: emailResending,
        disabled: emailResending || active
    }, /*#__PURE__*/ wn.createElement(VerticalTransition, {
        className: chromaticIgnoreClassName(),
        triggered: active,
        primary: $__i18n._({
            id: "button.resendEmail",
            message: "Resend email"
        }),
        secondary: $__i18n._({
            id: "button.emailResent",
            message: "Email resent! Try again in {timeRemaining}s",
            values: {
                timeRemaining: timeRemaining
            }
        })
    }));
    const goBackButton = goBack && /*#__PURE__*/ wn.createElement(Button, {
        variant: "ghost",
        onClick: goBack
    }, $__i18n._({
        id: "button.goBack",
        message: "Go back"
    }));
    const actions = sendMagicLink ? /*#__PURE__*/ wn.createElement(ButtonColumn, {
        top: /*#__PURE__*/ wn.createElement(wn.Fragment, null, additionalActions, resendButton),
        bottom: /*#__PURE__*/ wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Button, {
            variant: "outline",
            onClick: ()=>{
                setMagicLinkSent(true);
                sendMagicLink().catch(()=>setMagicLinkSent(false));
            },
            loading: magicLinkSent
        }, $__i18n._({
            id: "button.loginWithoutPassword",
            message: "Log in without a password"
        })), goBackButton)
    }) : /*#__PURE__*/ wn.createElement(ButtonColumn, null, additionalActions, resendButton, goBackButton);
    return /*#__PURE__*/ wn.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ wn.createElement(Typography, {
        variant: "header"
    }, header), /*#__PURE__*/ wn.createElement(Typography, null, description), children, actions);
};

export { EmailActionLayout as default };
//# sourceMappingURL=EmailActionLayout.mjs.map
