import ReactDOM from 'react-dom';
import PageForm from "./Form";
import Pages from "./List";
import Prompt from "./Prompt";
import {useState} from "react";
import * as React from 'react';
import {Divider, Paper} from "@mui/material";

interface List {
    id: string;
    date: string;
}

const app = document.getElementById('app');

let sessionPassphrase = sessionStorage.getItem("key");
let pages: List[] = [];
let getPageContentUrl = "";
let postUrl = "";
let removeUrl = "";
let csrf = "";
if (app) {
    getPageContentUrl   = "" + app.getAttribute('data-url');
    pages               = JSON.parse("" + app.getAttribute('data-list'));
    postUrl             = "" + app.getAttribute('data-post');
    removeUrl           = "" + app.getAttribute('data-remove');
    csrf                = "" + app.getAttribute('data-csrf');
    ReactDOM.render(<App/>, app);
}

export default function App() {
    const [listPages, setListPages]     = useState(pages);
    const [passphrase, setPassphrase]   = useState(sessionPassphrase);

    return (
        <div>
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        {/*<div className="card">*/}
                            {/*<Paper elevation={3}>*/}
                                <Prompt open={passphrase === null} setOpen={setPassphrase}/>
                                <Pages
                                    pages={listPages}
                                    url={getPageContentUrl}
                                    passphrase={passphrase}
                                    setPassphrase={setPassphrase}
                                    csrf={csrf}
                                    removeUrl={removeUrl}/>
                                <Divider/>
                                <PageForm setListPages={setListPages} csrf={csrf} url={postUrl} passphrase={passphrase}/>
                            {/*</Paper>*/}
                        {/*</div>*/}
                    </div>
                </div>
            </div>
        </div>
    );
}