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 Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import Grid from '@material-ui/core/Grid';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
import CloseIcon from '@material-ui/icons/Close';
import TodayIcon from '@material-ui/icons/Today';
import CropOriginalIcon from '@material-ui/icons/CropOriginal';
import CameraIcon from '@material-ui/icons/Camera';
import LocationOnIcon from '@material-ui/icons/LocationOn'
import Typography from '@material-ui/core/Typography';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import List from '@material-ui/core/List';
import Paper from '@material-ui/core/Paper';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app

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)',
    },
    modal: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    paper: {
        backgroundColor: theme.palette.background.paper,
        width: '100%',
        height: '100%',
        //boxShadow: theme.shadows[5],
        //padding: theme.spacing(2, 4, 3),
    },
    fabL: {
        position: 'absolute',
        bottom: '50%',
        left: theme.spacing(2),
    },
    fabR: {
        position: 'absolute',
        bottom: '50%',
        //left: `calc(95% - ${theme.spacing(2)}px)`,
        //right: theme.spacing(2),
        right: `calc(${theme.spacing(2)}px + ( 100vw / 4 ))`,
        Mcontainer: {
            display: "flex",
            flexWrap: "wrap",
            position: "absolute",
            top: 0,
            left: 0,
            height: "100%",
            width: "100%",
            alignItems: "center"
        },
    },
}));
var Imagesrc = 0;
var FabL = false;
var FabR = false;
var Open = false;

export default function TitlebarGridList() {
    const classes = useStyles();

    const [Imageopen, setImageOpen] = React.useState(false);

    const TDLength = tileData.length;

    //const { photoIndex, isOpen } = this.state;

    const handleClick = (index) => () => {
        Imagesrc = index;
        if (index == 0) {
            FabL = false;
        } else {
            FabL = true;
        }
        if (TDLength == index + 1) {
            FabR = false;
        } else {
            FabR = true;
        }
        console.log(FabL + " " + FabR);
        setImageOpen(true);
    }

    const moveFw = () => {
        Imagesrc++;
        setImageOpen(false);
        setImageOpen(true);
    }

    const moveBw = () => {
        Imagesrc--;
        setImageOpen(false);
        setImageOpen(true);
    }

    const handleImageClose = () => {
        setImageOpen(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, index) => (
                    <GridListTile key={tile.img} onClick={handleClick(index)}>
                        <img src={tile.img} alt={tile.title} />
                    </GridListTile>
                ))}
            </GridList>
            <Modal
                aria-labelledby="transition-modal-title"
                aria-describedby="transition-modal-description"
                className={classes.modal}
                open={Imageopen}
                onClose={handleImageClose}
                closeAfterTransition
                BackdropComponent={Backdrop}
                BackdropProps={{
                    timeout: 500,
                }}
            >
                <Fade in={Imageopen}>
                    <div className={classes.paper}>
                        <Grid container spacing={0}>
                            <Grid item xs={9}
                                style={{
                                    alignItems: 'center',
                                    alignContent: 'center',
                                    backgroundColor: 'black',
                                    height: '100vh',
                                }}
                                align="center"
                                justify="center"
                                direction="column"
                            >
                                <Grid
                                    container
                                    spacing={0}
                                    direction="column"
                                    alignItems="center"
                                    justify="center"
                                    style={{ minHeight: '100vh' }}
                                >
                                    <Grid item xs={12}>
                                        <img src={tileData[this.state.Imagesrc].img}
                                            style={{
                                                margin: "auto",
                                                maxHeight: "100vh",
                                                maxWidth: "100%",
                                            }}
                                        ></img>
                                    </Grid>

                                </Grid>
                                {FabL === true ? <Fab color="inherit" aria-label="add" onClick={moveBw} className={classes.fabL}>
                                    <ArrowBackIosIcon />
                                </Fab> : ""}
                                {console.log(FabL + " " + FabR)}
                                
                                {FabR === true ? <Fab color="inherit" aria-label="add" onClick={moveFw} className={classes.fabR}>
                                    <ArrowForwardIosIcon />
                                </Fab> : ""}
                            </Grid>
                            <Grid item xs={3}>
                                <Typography component="h5">
                                    <IconButton aria-label="delete" type="button" onClick={handleImageClose}>
                                        <CloseIcon />
                                    </IconButton>
                                    資訊
                                </Typography>
                                <List
                                    subheader={
                                        <ListSubheader component="div" id="nested-list-subheader">
                                            詳細資料
                                         </ListSubheader>
                                    }
                                >
                                    <ListItem>
                                        <ListItemIcon>
                                            <TodayIcon />
                                        </ListItemIcon>
                                        <ListItemText primary="2016年7月14日" secondary="週六 下午5:43 GMT+08:00" />
                                    </ListItem>
                                    <ListItem>
                                        <ListItemIcon>
                                            <CropOriginalIcon />
                                        </ListItemIcon>
                                        <ListItemText primary="IMG_20160716_174348.jpg" secondary="12.8MP 3096×4128 1.6MB" />
                                    </ListItem>
                                    <ListItem>
                                        <ListItemIcon>
                                            <CameraIcon />
                                        </ListItemIcon>
                                        <ListItemText primary="Samsung GT-I9505" secondary="ƒ/2.2 1/33 4.2mm ISO125" />
                                    </ListItem>
                                    <ListItem>
                                        <ListItemIcon>
                                            <LocationOnIcon />
                                        </ListItemIcon>
                                        <ListItemText primary="中國广东省廣州市" secondary="概估位置" />
                                    </ListItem>
                                </List>
                            </Grid>
                        </Grid>
                    </div>
                </Fade>
            </Modal>
        </div>
        
    );
}