import React, { Component, Fragment } from 'react'
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import { withStyles } from '@material-ui/core/styles';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
import ArrowLeft from '@material-ui/icons/ArrowBackIosSharp';
import ArrowRight from '@material-ui/icons/ArrowForwardIosSharp';
import Hidden from '@material-ui/core/Hidden';
import Tile from './Tile';

const styles = theme => ({
    root: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
        width: '100%',
    },
    rootGridList: {
        margin: '0 !important',
    },
    gridList: {
        position: 'relative',
        flexWrap: 'nowrap',
        scrollBehavior: 'smooth',
        width: '100%',
        // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
        transform: 'translateZ(0)',
        marginBottom: theme.spacing(4),
        scrollbarWidth: 'none',
        '&::-webkit-scrollbar': {
            width: 0,
        }
    },
    gridListTile: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100% !important',
        //margin: '0 3vw',
        padding: '16px !important',
        [theme.breakpoints.up('md')]: {
            margin: '0',
            paddingTop: '5vh',
        },
    },
    rootGridListTile: {

    },
    tile: {
        width: '100% !important',
        overflow: 'visible !important',
    },
    anchor: {
        width: '100% !important',
        position: 'absolute',
        left: '16px',
        right: '16px',
        top: '-200px',
        visibility: 'hidden',
    },
    anchorPrevious: {
        left: '-16px',
    },
    anchorNext: {
        left: '16px',
    },
    icon: {
        width: '0.9em',
        height: '0.9em',
        padding: theme.spacing(1.5),
        color: theme.palette.secondary.main,
        background: theme.palette.primary.dark,
        borderRadius: '50%',
    },
    dNone: {
        visibility: 'hidden',
    }
});

class HorizontalScroller extends Component {
    state = {
        defaultIndex: 2,
        direction: '',
    }

    handlePrevious = () => {
        this.setState({ direction: 'previous' })

        if (this.state.defaultIndex == 8 || this.state.defaultIndex == 5) {
            this.setState({ defaultIndex: this.state.defaultIndex - 5 })
        }
        if (this.state.defaultIndex == 3) {
            this.setState({ defaultIndex: this.state.defaultIndex - 3 })
        }
        else if (this.state.defaultIndex == 0) {
            this.setState({ defaultIndex: this.state.defaultIndex + 8 })
        }

    }

    handleNext = () => {
        this.setState({ direction: 'next' })
        if (this.state.defaultIndex == 6 || this.state.defaultIndex == 7 || this.state.defaultIndex == 8) {
            this.setState({ defaultIndex: 0 })
        }
        else if (this.state.defaultIndex == 0 || this.state.defaultIndex == 3) {
            this.setState({ defaultIndex: this.state.defaultIndex + 5 })
        }
        else if (this.state.defaultIndex < 6) {
            this.setState({ defaultIndex: this.state.defaultIndex + 3 })
        }
    }

    render() {
        const { classes, type } = this.props
        const { defaultIndex } = this.state
        const children = (tile) => React.Children.map(this.props.children, child => {
            return React.cloneElement(child, {
                tile
            });
        });

        return (
            <div className={classes.root}> {/* Ne pas mettre de Fragment */}
                <Hidden smDown>
                    <a className={(defaultIndex < 3) ? classes.dNone : ''} onClick={this.handlePrevious} href={'#' + type + defaultIndex}><ArrowLeft classes={{ root: classes.icon }}></ArrowLeft></a>
                </Hidden>
                <GridList className={classes.gridList} cols={isWidthUp('md', this.props.width) ? 3 : isWidthUp('sm', this.props.width) ? 2.4 : 1.15} classes={{ root: classes.rootGridList }}>
                    {this.props.data && this.props.data.map((tile, index) => (

                        <GridListTile className={classes.gridListTile} classes={{ root: classes.rootGridListTile, tile: classes.tile }} key={index}>
                            <Tile rowData={tile} key={index}>
                                {(this.state.direction == 'previous') ? (<a id={type + index} className={classes.anchor + ' ' + classes.anchorPrevious}></a>) : (<a id={type + index} className={classes.anchor + ' ' + classes.anchorNext}></a>)
                                }
                                {children(tile)}
                            </Tile>
                        </GridListTile>

                    ))}
                </GridList>
                <Hidden smDown>
                    <a className={(defaultIndex > 5) ? classes.dNone : ''} onClick={this.handleNext} href={'#' + type + defaultIndex}><ArrowRight classes={{ root: classes.icon }}></ArrowRight></a>
                </Hidden>
            </div>
        )
    }
}

export default withStyles(styles)(withWidth()(HorizontalScroller))
