import * as React from 'react';
import {EncryptStorage} from 'storage-encryption';
import {Button, Stack, TextField} from "@mui/material";
import MDEditor from '@uiw/react-md-editor';
import rehypeSanitize from "rehype-sanitize";
let encryptStorage = new EncryptStorage('test'); // TODO la clef doit venir de l'utilisateur

export default function PageForm({setListPages, csrf, url, passphrase}) {
    const isPassphraseSet = passphrase !== null;
    const [content, setContent] = React.useState<string>("");
    const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        encryptStorage = new EncryptStorage(passphrase);
        const HTMLForm : HTMLFormElement = event.currentTarget;
        const decryptedFormData = new FormData(HTMLForm);
        const encryptedFormData = new FormData();
        for (const [key, value] of decryptedFormData.entries()) {
            encryptStorage.encrypt('uuid'+key, value);
            const newEncryptedString = localStorage.getItem('uuid'+key);
            if (newEncryptedString) {
                encryptedFormData.append(key, newEncryptedString);
            }
        }

        encryptStorage.encrypt('uuidtext', content);
        encryptedFormData.append("text", ""+localStorage.getItem('uuidtext'))

        encryptedFormData.append('_token', csrf);

        const response = await fetch(url, {
            method: 'POST',
            body: encryptedFormData
        });

        const json = await response.json();
        const uuid = json.uuid;
        for (const key of decryptedFormData.keys()) {
            const newEncryptedString = localStorage.getItem('uuid'+key);
            localStorage.setItem(uuid+key, ""+newEncryptedString);
            localStorage.removeItem("uuid"+key);
        }

        if (json.success) {
            HTMLForm.reset();
            const savedDate = json.date;
            const oSavedDate = new Date();
            oSavedDate.setFullYear(savedDate.substring(0, 4), savedDate.substring(4,6), savedDate.substring(6,8));
            oSavedDate.setHours(savedDate.substring(9,11), savedDate.substring(11,13), savedDate.substring(13,15));
            setListPages(previousList => [
                {
                    id: uuid,
                    date: oSavedDate.toLocaleString(),
                    title: decryptedFormData.get("title"),
                    content: decryptedFormData.get("text"),
                },
                ...previousList
                ]);
        }
    }
    function updateContent(value: string|undefined): void {
        setContent(value as string);
    }

    if (isPassphraseSet) {
        return (
            <form action={url} id="postPage" method="post" onSubmit={onSubmit}>
            <Stack
                component="div"
                spacing={2}
            >
                <TextField
                    label="Titre"
                    id="title"
                    name="title"
                    variant="outlined"
                    size="small"
                />
                <MDEditor
                    value={content}
                    onChange={updateContent}
                    previewOptions={{
                        rehypePlugins: [[rehypeSanitize]],
                    }}
                  />
                <Button variant="contained" type={"submit"}>
                    Enregistrer
                </Button>
            </Stack>
            </form>
        );
    }

    return (<div></div>);
}