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 StarBorderIcon from '@material-ui/icons/StarBorderOutlined';
import clsx from 'clsx';

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)',
    },
    titleBar: {
        background: 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' +
            'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
    },
    titleGrid: {},
    titleGridOpen: {
        transition: theme.transitions.create('height', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    titleGridClose: {
        transition: theme.transitions.create('height', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
    },
}));

/**
 * 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();
    const [Hovering, isHovering] = React.useState(false);

    const handleMouseHover = value => () => {
        //isHovering(value);
        //disable first, not understand how to do easing
        isHovering(false);
    }

    return ( <
        div className = { classes.root } >
        <
        GridList cellHeight = { 180 }
        cols = { 5 }
        className = { classes.gridList } >
        <
        GridListTile key = "Subheader"
        cols = { 5 }
        style = {
            { height: 'auto' }
        } >
        <
        ListSubheader component = "div" > December < /ListSubheader> < /
        GridListTile > {
            tileData.map((tile) => ( <
                GridListTile key = { tile.img } >
                <
                img src = { tile.img }
                alt = { tile.title }
                onMouseEnter = { handleMouseHover(true) }
                onMouseLeave = { handleMouseHover(false) }
                />{Hovering && <GridListTileBar
                title = { tile.title }
                titlePosition = "top"
                onMouseEnter = { handleMouseHover(true) }
                onMouseLeave = { handleMouseHover(false) }
                className = {
                    clsx(classes.titleGrid, {
                        [classes.titleGridOpen]: Hovering,
                        [classes.titleGridClose]: !Hovering,
                    })
                }
                actionIcon = { <
                    IconButton
                    className = { classes.icon } >
                    <
                    StarBorderIcon / >
                    <
                    /IconButton>
                }
                actionPosition = "left"
                className = { classes.titleBar }
                />}< /
                GridListTile >
            ))
        } <
        /GridList> < /
        div >
    );
}