import React from 'react';
import Modal from '@material-ui/core/Modal';
import Typography from '@material-ui/core/Typography';

import '../App.css';

const ModalList = () => {

    const [open, setOpen] = React.useState(false);

    const imageList = [
        { id: "0", url: "../Photos/kolvaus1.jpeg", desc: "Kolvaus kuva" },
        { id: "1", url: "../Photos/rpiMoist.jpeg", desc: "rpi Vesianturi" },
        { id: "2", url: "../Photos/rpiPek.jpeg", desc: "Pekan testit" },
        { id: "3", url: "../Photos/rpiTemp.jpeg", desc: "rpi Lämpöanturi" },
        { id: "4", url: "../Photos/konstaRpi.jpeg", desc: "Konstan testit" },
        { id: "5", url: "../Photos/kokous1.jpeg", desc: "Kokous kuva" }
    ]

    const handleOpen = (e) => {
        e.preventDefault();
        imageList.filter((item, index) => parseInt(e.target.id) !== index)
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
            <div className="modal-wrapper">
                {imageList.map((item, index) =>
                <div key={index}>
                    <button type="button" onClick={handleOpen}>
                        <img id="imageIndex" alt="Broken" src={item.url} width="250"></img>
                    </button>

                    <Modal
                        open={open}
                        onClose={handleClose}
                    >
                        <div  className="Modaldiv">
                            <img id={index} alt="Broken" src={item.url} width="600" ></img>
                            <Typography variant="body1">{item.desc}</Typography>
                        </div>
                    </Modal>
                </div>)
                }
            </div>
        </div>
    );
};

export default ModalList;