import React from 'react';
import Paper from "@material-ui/core/Paper/Paper";
import {Card, CardMedia, CardContent, CardActions, Grid} from "@material-ui/core";
import Typography from "@material-ui/core/Typography/Typography";
import Button from "@material-ui/core/Button/Button";
import InfiniteScroll from 'react-infinite-scroller';
import {BaseUrl, BaseUrlApi} from "../../base/baseurls";
import {withStyles} from "@material-ui/core/styles/index";
import axios from 'axios';
import {Link} from "react-router-dom";
import PropTypes from "prop-types";
import bgLogin from '../../images/bgLogin.jpg';


const styles = theme => ({
    paper: {
        padding: theme.spacing.unit * 10,
        marginTop: 40,
        textAlign: 'center',
        color: theme.palette.text.secondary,
    },
    card: {
        margin: theme.spacing.unit,
        maxWidth: 225,
    },
    media: {
        height: 0,
        paddingTop: '56.25%', // 16:9
    },
    link: {
        textDecoration: 'none',
        textAlign: 'right',
        color: '#666666',
        '&:hover': {
            webkitTransition: 'transition: all 0.4s',
            textDecoration: 'none',
            color: '#a64bf4',
            border: "1px solid #d0d0d0;",
        },
    },
    root: {
        flexGrow: 1,
        backgroundImage: `url("${bgLogin}")`,
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        overflow: 'auto',
        width: '100%',
        height: '100%',
    },
    div: {
        margin: '0 auto',
        marginTop: 20,
        width: "90%",

    },
});

class Cards extends React.Component {

    render() {
        const {classes} = this.props;
        const {apks} = this.props;
        const DetailApkFile = props => <Link to={`/Profile/Analyse/${apks.pk}/`} {...props}/>;


        return (
            <Grid item>
                <Card className={classes.card}>
                    <CardMedia
                        className={classes.media}
                        image={[BaseUrl, apks.apk_avatar].join('')}
                    />
                    <CardContent>
                        <Typography gutterBottom variant="headline" component="h2">
                            {apks.apk_file}
                        </Typography>
                    </CardContent>
                    <CardActions>
                        <Button color="primary" className={classes.link}  component={DetailApkFile} >
                            Begin
                        </Button>
                    </CardActions>
                </Card>
            </Grid>
        )
    }

}

class HomeContext extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            url: `${BaseUrlApi}/ApkFiles/`,
            data: [],
            hasMoreItems: true,
            page: 1,
        };
    }


    handleLoadMore() {
        axios.get(`${this.state.url}?page=${this.state.page}`, {
            headers: {
                'Content-Type': 'multipart/form-data',
            }
        })
            .then(response => {
                this.setState(prevState => ({
                    data: [ ...prevState.data, ...response.data],
                    page: prevState.page+1,
                }));

            })
            .catch(error => {
                // TODO: Show error message for login fail.
                console.log(error)
            });
    }

    render() {
        const {classes} = this.props;
        const loader = <Grid className="loader" key={0}>Loading ...</Grid>;

        return (
                <Paper className={classes.paper}>
                    <InfiniteScroll
                        pageStart={0}
                        loadMore={this.handleLoadMore.bind(this)}
                        hasMore={this.state.hasMoreItems}
                        loader={loader}>
                        <Grid container>
                            {this.state.data.map((apks , index) => <Cards apks={apks} key={index} {...this.props}/>)}
                        </Grid>
                    </InfiniteScroll>
                </Paper>
        );
    }
}

HomeContext.propTypes = {
    classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(HomeContext);