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

import axios from 'axios';

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

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

const ArticleCard = (props) => {
    const { article, navigate, onChange, filterBrand } = props;

    const [openAddDialog, setOpenAddDialog] = useState(false);
    const [error, setError] = useState(false);

    const handleClick = () => {
        navigate('/ArticleDetails', {state:{id: -1, article_id: article}});
    }


    return (
        <Card sx={{ height: 350, maxWidth: 345, position: "relative"}}>
            <CardMedia
                component="img"
                height="200"
                image={article.frontImage}
                title="Bild"
                sx={{ padding: "1em 1em 0 1em", objectFit: "contain" }}
            />
            <CardContent>

            <Button variant="text"
                    sx={{textTransform: "none"}}
                    onClick={filterBrand}
            >
                    {article.brand === null ? "Unbekannte Marke:": article.brand.name+":"}
            </Button>
            
            {article.name}


            </CardContent>
            
            <CardActions sx={{position: "absolute", bottom: 0,}}>
            <Button size="small" onClick={handleClick}> 
                Öffnen
            </Button>
            </CardActions>
        </Card>
    );
}

export default ArticleCard