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

//import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
//import Box from '@mui/material/Box';

import axios from 'axios';
import { useNavigate } from 'react-router-dom';

import ArticleCard from "./articleCard.component";

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

const ArticelOverview = (props) => {
    const navigate = useNavigate();

    const [tableData, setTableData] = useState([]);

    useEffect(()=>{      
        axios.get(baseURL+"/articles/")
            .then((res) => {
                const data = res.data;
                console.log(data)
                setTableData(data);
            })
    },[])

    return (
        <div style={{ height: 800, width: '100%' }}>

            <Typography variant="h2" gutterBottom>
                Übersicht über alle Artikel
            </Typography>

            <Container maxWidth="xl">
                <Grid
                    container
                    direction="row"
                    justify="space-evenly"
                    alignItems="stretch"
                    spacing={2}
                >
                    {
                        tableData.map(data => (
                            <Grid item
                                key={`GridItem-${data.pk}`} xs={2}
                            >
                                <ArticleCard 
                                    article={data}
                                    navigate={navigate}
                                />
                            </Grid>
                        ))
                    }
                </Grid>
            </Container>

        </div>
    );
}

export default ArticelOverview