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';

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',
 *     cols: 2,
 *   },
 *   {
 *     [etc...]
 *   },
 * ];
 */
export default function ImageGridList() {
    const classes = useStyles();
    return ( <
        div className = { classes.root } >
        <
        GridList cellHeight = { 140 }
        className = { classes.gridList }
        /* newadd */

        /* end */
        cols = { 6 } > {
            tileData.map((tile) => ( <
                GridListTile key = { tile.img }
                cols = { tile.cols || 1 } >
                <
                img src = { tile.img }
                alt = { tile.title }
                /> < /
                GridListTile >
            ))
        } <
        /GridList> < /
        div >
    );
    /*
        return ( <
            div className = { classes.root } >
            <
            GridList cellHeight = { 160 }
            className = { classes.gridList } >
            <
            GridListTile key = "Subheader"
            cols = { 2 }
            style = {
                { height: 'auto' }
            } >
            <
            ListSubheader component = "div" > December < /ListSubheader> < /
            GridListTile > {
                tileData.map((tile) => ( < GridListTile key = { tile.img }
                    cols = { tile.cols || 1 } >
                    <
                    img src = { tile.img }
                    alt = { tile.title }
                    /> < /
                    GridListTile >
                ))
            } <
            /GridList> < /
            div >
        );
        */
    /*
    return ( <
        div className = { classes.root } >
        <
        GridList cellHeight = { 140 }
        className = { classes.gridList }
        cols = { 4 } > {
            tileData.map((tile) => ( <
                GridListTile key = { tile.img }
                cols = { tile.cols || 1 } >
                <
                img src = { tile.img }
                alt = { tile.title }
                /> < /
                GridListTile >
            ))
        } <
        /GridList> < /
        div >
    );
    */
}