import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
import ListSubheader from '@material-ui/core/ListSubheader';
import IconButton from '@material-ui/core/IconButton';
import InfoIcon from '@material-ui/icons/Info';
import tileData from './tileData';
import { useEffect } from 'react';
import imageList from './imageList.js';


const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        overflow: 'hidden',
    },
    gridList: {
        width: '100%',
        height: '100%',
    },
    icon: {
        color: 'rgba(255, 255, 255, 0.54)',
    },
}));

/**
 * The example data is structured as follows:
 *
 * import image from 'path/to/image.jpg';
 * [etc...]
 *
 * const tileData = [
 *   {
 *     img: image,
 *     title: 'Image',
 *     author: 'author',
 *   },
 *   {
 *     [etc...]
 *   },
 * ];
 */
export default function TitlebarGridList(props) {

    const classes = useStyles();

    const [error, setError] = React.useState(null);
    const [isLoaded, setIsLoaded] = React.useState(false);
    const [items, setItems] = React.useState([]);

    const [folderName, setFolderName] = React.useState('user:/Photo/Photo/uploads/');

    const onChanageFolder = (folderN) => {
        setFolderName(folderN);
        console.log("1" + folderName);
        props.onChange(folderN);
    }

    useEffect(() => {
        //fetch("http://localhost:3000/listFolder")
        fetch("/system/ajgi/interface?script=/Photo/backend/listFolder.js", {
            method: 'post',
            body: JSON.stringify({ folder: folderName })
        })
            .then(res => res.json())
            .then(
                (result) => {
                    setIsLoaded(true);
                    setItems(result);
                },
                // Note: it's important to handle errors here
                // instead of a catch() block so that we don't swallow
                // exceptions from actual bugs in components.
                (error) => {
                    setIsLoaded(true);
                    setError(error);
                }
            )
    }, [])

    
    if (error) {
        return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
        return <div>Loading...</div>;
    } else {
        return (
            <div className={classes.root}>
                <GridList cellHeight={180} cols={5} className={classes.gridList}>
                    {items.map((tile) => (
                        <GridListTile key={tile.img}>
                            <img src={tile.img} alt={tile.Foldername} />
                            <GridListTileBar
                                title={tile.Foldername}
                                actionIcon={
                                    <IconButton aria-label={`info about ${tile.Foldername}`} onClick={() => onChanageFolder(tile.VPath)} className={classes.icon}>
                                        <InfoIcon />
                                    </IconButton>
                                }
                            />
                        </GridListTile>
                    ))}
                </GridList>
            </div>
        );
    }
}