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',
        backgroundColor: theme.palette.background.paper,
    },
    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() {
    const classes = useStyles();

    return ( <
        div className = { classes.root } >
        <
        GridList cellHeight = { 180 }
        cols = { 5 }
        className = { classes.gridList } > {
            tileData.map((tile) => ( <
                    GridListTile key = { tile.img } >
                    <
                    img src = { tile.img }
                    alt = { tile.title }
                    /> <
                    GridListTileBar title = { tile.title }
                    subtitle = { < span > by: { tile.author } < /span>}
                        actionIcon = { <
                            IconButton
                            className = { classes.icon } >
                            <
                            InfoIcon / >
                            <
                            /IconButton>
                        }
                        /> < /
                        GridListTile >
                    ))
            } <
            /GridList> < /
            div >
        );
    }