// import './login.css';
import { Backdrop, Box, Button, CircularProgress, TextField, List, ListItem, ListItemButton, ListItemText, ListItemIcon } from '@mui/material';
import React, { useState, useEffect } from 'react'
import { dbGetCollection, dbGetItems, dbUpdateCollectionGlob, dbUpdateCollectionSummary, dbUpdateCollectionSummaryNLTK } from './database_util';

import AddIcon from '@mui/icons-material/Add';

const CollectionEditor = (props) => {
    const [open, setOpen] = 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 generateT5Summary = 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);
    }

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


    // console.log("loadedRawFiles", props.loadedRawFiles)

    return (
        <Box>
            <h2>{props.collection["collection_name"]}</h2>
            
            <List sx={{boxShadow:1}}>
                <ListItem>
                    <ListItemButton component="label">
                        <ListItemIcon>
                            <AddIcon/>
                        </ListItemIcon>
                        <ListItemText>
                            Upload Documents
                        </ListItemText>
                        <input type="file" name="fileUpload" onChange={props.onFileUpload} hidden/>
                    </ListItemButton>
                </ListItem>
            {
                props.loadedRawFiles.map((f) => {
                    return (
                        <ListItem>
                            <ListItemButton>
                                <ListItemText>
                                    {f.path}
                                </ListItemText>
                            </ListItemButton>
                        </ListItem>
                    );
                })
            }
            </List>

            {/* <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={generateT5Summary}>Generate T5 Summary</Button>
            <Button onClick={generateNLTKSummary}>Generate NLTK summary</Button>

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

export default CollectionEditor;