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

const CollectionEditor = (props) => {

    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 = () => {
        console.log(props.collection)
        dbUpdateCollectionGlob(props.collection["collection_id"],props.collection["collection_data"]["glob"])
    }

    return (
        <Box>
            <h2>Collection Title</h2>
            <h3>Collection Text Input</h3>
            <TextField multiline maxRows={20} fullWidth label="(Debug) Raw text:" value={getGlob()} onChange={(e) => updateGlob(e)}/>
            
            <TextField disabled multiline maxRows={20} fullWidth label="Summary:" value="Summary Text Here"/>

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

export default CollectionEditor;