import * as React from 'react';
import {useState} from 'react'

import axios from 'axios';

import {Button, Stack, Input } from '@mui/material';
import Typography from '@mui/material/Typography';
import {Card, CardActions, CardContent, CardMedia } from '@mui/material'
import {Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from '@mui/material'


const baseURL = "http://localhost:8000/api"

const PictureCard = (props) => {
    const { type, article, pictureType, onChange } = props;

    const [openAddDialog, setOpenAddDialog] = useState(false);
    const [uploadFile, setUploadFile] = useState(null);
    const [error, setError] = useState(false);
    //const [image, setImage] = useState(eval("article."+pictureType));

    const handleClick = () => {
        setOpenAddDialog(true);
    }

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

    const handleUploadSelection = (e) => {
        //console.log(e.target.files[0])
        setUploadFile(e.target.files[0]);
    };

    const handleUpload = (event) => {
        event.preventDefault()
        const formData = new FormData();
        formData.append("fileTitle", pictureType);
        formData.append("uploadedFile", uploadFile);
        axios.post(baseURL+'/article/post_articleImage/'+article.pk, formData, {
            headers: {
            'content-type': 'multipart/form-data'
            }
        })
        .then(function (response) {
            setOpenAddDialog(false);
            //console.log(response);
            //setImage(eval("response.data."+pictureType))
            onChange(response.data)
        })
        .catch(function (error) {
            //console.log(error);
            setError(true);
        });
    };

    return (
        <Card sx={{ maxWidth: 345 }}>
            <CardContent>
            <Typography gutterBottom variant="h5" component="div">
                {type}
            </Typography>
            </CardContent>
            <CardMedia
                component="img"
                height="450"
                image={eval("article."+pictureType)}
                title="Bild"
                sx={{ padding: "1em 1em 0 1em", objectFit: "contain" }}
            />
            <CardActions>
            <Button size="small" onClick={handleClick}> 
                {eval("article."+pictureType) === null ? "Bild hinzufügen" : "Neues Bild"}
            </Button>
            <Dialog open={openAddDialog} onClose={handleClose}>
                <DialogTitle>Bild hinzufügen</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        Bild auswählen und uploaden
                    </DialogContentText>
                    <Stack container spacing={1}>            
                        <Input 
                            accept="image/*" 
                            id="contained-button-file" 
                            multiple type="file" 
                            onChange={handleUploadSelection}
                            //error={error.toString()}
                        />
                        
                        <Typography gutterBottom variant="subtitle1" component="div" color="red">
                            {error ? "Fehler beim uploaden des Files!" : ""}
                        </Typography>
                        
                    </Stack>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose}>
                        Abbrechen
                    </Button>
                    <Button onClick={handleUpload}>
                        Hinzufügen
                    </Button>
                </DialogActions>
            </Dialog>
            </CardActions>
        </Card>
    );
}

export default PictureCard