// import './login.css';
import { Backdrop, Box, Button, CircularProgress, TextField } from '@mui/material';
import React, { useState, useEffect } from 'react'
import { dbGetCollection, dbUpdateCollectionGlob, dbUpdateCollectionSummary } from './database_util';

const CollectionEditor = (props) => {
    const [open, setOpen] = React.useState(false);

    const updateGlob = (event) => {
        // console.log();

        let copy =  JSON.parse(JSON.stringify(props.collection))

        copy["collection_data"]["glob"] = event.target.value

        props.onCollectionUpdate(copy)

        // console.log(copy);

    }

    const getGlob = () => {
        try{
            let v = props.collection["collection_data"]["glob"];
            return v;
        } catch {
            return "null";
        }
    }

    const saveGlob = async () => {
        await dbUpdateCollectionGlob(props.collection["collection_id"],props.collection["collection_data"]["glob"])
    }
    
    const generateSummary = async () => {
        setOpen(true);
        let id = props.collection["collection_id"]
        await saveGlob()
        await dbUpdateCollectionSummary(id)
        console.log(id,props.collection)
        props.onCollectionUpdate(await dbGetCollection(id))
        setOpen(false);
    }

    return (
        <Box>
            <h2>{props.collection["collection_name"]}</h2>
            <h3>Debug Collection Glob:</h3>
            <TextField multiline maxRows={15} fullWidth label="(Debug) Raw text:" value={getGlob()} onChange={(e) => updateGlob(e)}/>
            <h3>Generated Summary:</h3>
            <TextField disabled multiline maxRows={20} fullWidth label="Summary:" value={props.collection["collection_summary"]}/>

            <Button onClick={saveGlob}>(Debug) Save Glob</Button>
            <Button onClick={generateSummary}>Generate Summary</Button>


            <Backdrop
                open={open}
            >
                <CircularProgress/>
            </Backdrop>
        </Box>
    );
}

export default CollectionEditor;