"use client"

import { useContext, useState } from "react"
import { authLocalization, type AuthLocalization } from "../../../lib/auth-localization"
import { AuthUIContext } from "../../../lib/auth-ui-provider"
import { SettingsCard } from "../shared/settings-card"
import type { SettingsCardClassNames } from "../shared/settings-card"
import { TwoFactorPasswordDialog } from "./two-factor-password-dialog"

export interface TwoFactorCardProps {
    className?: string
    classNames?: SettingsCardClassNames
}

export function TwoFactorCard({ className, classNames }: TwoFactorCardProps) {
    const localization = { ...authLocalization };
    const {
        hooks: { useSession }
    } = useContext(AuthUIContext)
    const [showPasswordDialog, setShowPasswordDialog] = useState(false)

    const { data: sessionData, isPending } = useSession()
    const isTwoFactorEnabled = sessionData?.user.twoFactorEnabled

    return (
        <div>
            <SettingsCard
                className={className}
                classNames={classNames}
                actionLabel={isTwoFactorEnabled ? localization.disable : localization.enable}
                description={localization.twoFactorCardDescription}
                instructions={
                    isTwoFactorEnabled
                        ? localization.twoFactorDisableInstructions
                        : localization.twoFactorEnableInstructions
                }
                isPending={isPending}
                title={localization.twoFactor}
                action={() => setShowPasswordDialog(true)}
            />

            <TwoFactorPasswordDialog
                classNames={classNames}
                open={showPasswordDialog}
                onOpenChange={setShowPasswordDialog}
                isTwoFactorEnabled={!!isTwoFactorEnabled}
            />
        </div>
    )
}