import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
import { SettingsAlert } from "@/app/components/SettingsAlert/SettingsAlert";
import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
import { TextChain } from "@/app/components/TextChain/TextChain";
import { decodeWithPassword } from "@/app/crypto/crypto";
import { useAccount } from "@/app/providers/AccountProvider/useAccount";
import { Paper, Text } from "@mantine/core";
import { useState } from "react";

export function Backup() {
    const [show, setShow] = useState("");
    const [account] = useAccount();

    const onChange = async (v : string) => {
        try{
            const decodedPhrase = await decodeWithPassword(v, account.seedPhraseEncrypted);
            setShow(decodedPhrase);
        }catch(e){

        }
    }
    
    return (
        <>
            <Breadcrumbs text="Backup"></Breadcrumbs>
            <InternalScreen>
                <SettingsAlert text={
                    "If you want to give your recovery phrase to someone, please stop! This may lead to the compromise of your conversations."
                }></SettingsAlert>
                <SettingsInput.Default 
                    hit="Confirmation"
                    type="password"
                    disabled={show.trim() !== ""}
                    mt={'sm'}
                    onChange={(e) => onChange(e.target.value)} placeholder="Enter confirmation"></SettingsInput.Default>  
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    To view your recovery phrase, enter the password you specified when creating your account or restoring from a seed phrase.
                </Text>        
                {show.trim() !== "" && (
                <>
                    <Paper mt={'sm'} p={'md'} withBorder>
                        <TextChain rainbow={true} mt={'sm'} text={show}></TextChain>
                    </Paper>
                    <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                        Please don't share your seed phrase! The administration will never ask you for it.
                    </Text>
                </>
                )}                  
            </InternalScreen>
        </>
    )
}