import PropTypes from 'prop-types';
import React from 'react';
import Gallery from 'react-grid-gallery';
import LinearProgress from '@material-ui/core/LinearProgress';
import ShareIcon from '@material-ui/icons/Share';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';

class imageList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            images: this.props.images,
            currentImage: 0,

            error: null,
            isLoaded: false,
            items: [],
        };

        this.onCurrentImageChange = this.onCurrentImageChange.bind(this);
        this.deleteImage = this.deleteImage.bind(this);
    }

    onCurrentImageChange(index) {
        this.setState({ currentImage: index });
    }

    deleteImage() {
        if (window.confirm(`Are you sure you want to delete image number ${this.state.currentImage}?`)) {
            //"/system/file_system/share/new?path="
            console.log(this.state.images[this.state.currentImage].src);
        }
    }


    componentDidMount() {
        fetch("/backend_test/listFile", {})
        /*
        fetch("/system/ajgi/interface?script=/Photo/backend/listFile.js", {
                method: 'post',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ folder: this.props.path })
            })
            */
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        images: result
                    });
                },
                // Note: it's important to handle errors here
                // instead of a catch() block so that we don't swallow
                // exceptions from actual bugs in components.
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error: error
                    });
                }
            )
    }

    setPath() {
        this.setState({ path: "user:/Photo/Photo/uploads/" });
    }

    
    render() {
        const { isLoaded, items, error } = this.state;
        const theme = {
            margin: 4,
        }

        if (error) {
            return <div>Error: {error.message} (imageList.js)</div>;
        }else if(!isLoaded) {
            return <div><LinearProgress /></div>;
        } else {
            return ( <Gallery images = { this.state.images }
                enableLightbox = { true }
                enableImageSelection={false}
                currentImageWillChange={this.onCurrentImageChange}

                customControls={[
                    <Button
                        variant="contained"
                        color="primary"
                        size="large"
                        style={theme}
                        startIcon={<ShareIcon />}
                        onClick={this.deleteImage}
                    >Share</Button>
                ]}
            />           
            );
        }
    }
}

imageList.propTypes = {
    images: PropTypes.arrayOf(
        PropTypes.shape({
            src: PropTypes.string.isRequired,
            thumbnail: PropTypes.string.isRequired,
            srcset: PropTypes.array,
            caption: PropTypes.oneOfType([
                PropTypes.string,
                PropTypes.element
            ]),
            thumbnailWidth: PropTypes.number.isRequired,
            thumbnailHeight: PropTypes.number.isRequired
        })
    ).isRequired
};


imageList.defaultProps = {
    images: []
};

export default imageList;