import { useCallback } from 'react';

import { Trans, useTranslation } from 'react-i18next';

import LoginForm from '@/components/LoginForm';
import { useAppUrls } from '@/hooks/useAppUrls';
import { dialogModel } from '@/models/dialogModel';

export interface LoginDialogOptions {
    /** 弹窗标题的 i18n key，默认 common.login.dialogTitle */
    titleKey?: string;
    /** 提示文案的 i18n key（支持 <linkText> / <downloadLink> 插值），默认 common.login.dialogPrompt */
    promptKey?: string;
}

export function useLoginDialog() {
    const { t } = useTranslation();
    const { openDialog, closeDialog } = dialogModel.useModel();
    const { deeplinkUrl, downloadUrlByPlatform } = useAppUrls();

    return useCallback(
        (options?: LoginDialogOptions) => {
            const titleKey = options?.titleKey ?? 'common.login.dialogTitle';
            const promptKey = options?.promptKey ?? 'common.login.dialogPrompt';

            const id = openDialog({
                title: t(titleKey),
                content: (
                    <div className="flex flex-col gap-2">
                        <p className="text-white/80 text-sm mb-2">
                            <Trans
                                i18nKey={promptKey}
                                components={{
                                    linkText: (() => {
                                        const Wrap = ({
                                            children,
                                        }: {
                                            children?: React.ReactNode;
                                        }) =>
                                            deeplinkUrl ? (
                                                <a
                                                    href={deeplinkUrl}
                                                    className="text-[#0EA5E9] hover:underline"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    {children}
                                                </a>
                                            ) : (
                                                <span>{children}</span>
                                            );
                                        return <Wrap />;
                                    })(),
                                    downloadLink: (() => {
                                        const Wrap = ({
                                            children,
                                        }: {
                                            children?: React.ReactNode;
                                        }) =>
                                            downloadUrlByPlatform ? (
                                                <a
                                                    href={downloadUrlByPlatform}
                                                    className="text-[#0EA5E9] hover:underline"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    {children}
                                                </a>
                                            ) : (
                                                <span>{children}</span>
                                            );
                                        return <Wrap />;
                                    })(),
                                }}
                            />
                        </p>
                        <LoginForm onSuccess={() => closeDialog(id)} />
                    </div>
                ),
                maskClosable: false,
                closeable: true,
            });
        },
        [t, openDialog, closeDialog, deeplinkUrl, downloadUrlByPlatform]
    );
}
