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


//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 { Button, Paper, styled, } from '@mui/material'
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

import Plot from 'react-plotly.js';

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



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

function TabPanel(props) {
    const { children, value, index, ...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`vertical-tabpanel-${index}`}
        aria-labelledby={`vertical-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box sx={{ p: 3 }}>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
  }
  
  TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.number.isRequired,
    value: PropTypes.number.isRequired,
  };
  
  function a11yProps(index) {
    return {
      id: `vertical-tab-${index}`,
      'aria-controls': `vertical-tabpanel-${index}`,
    };
  }

const AnalysesOverview = (props) => {
    const navigate = useNavigate();
    const [tableData, setTableData] = useState([{article_id: -1, count: 0}]);
    const [fromDate, setFromDate] = useState(dayjs('2023-01-01'));
    const [toDate, setToDate] = useState(dayjs('2023-09-01'));
    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    useEffect(()=>{      
        
    },[])

    const handlePlotButton = async () => {
        const data = {fromDate: fromDate.format("YYYY-MM-DD"), toDate: toDate.format("YYYY-MM-DD")};
        console.log(data);
        const receivedData = await axios.post(baseURL+"/analyses/countArticles", {
            data: data, 
        })
        setTableData(receivedData.data)
    }

    const handleBrandPlotButton = async () => {
        const data = {fromDate: fromDate.format("YYYY-MM-DD"), toDate: toDate.format("YYYY-MM-DD")};
        console.log(data);
        const receivedData = await axios.post(baseURL+"/analyses/countBrands", {
            data: data, 
        })
        setTableData(receivedData.data)
    }

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

            <Typography variant="h2" gutterBottom>
                Übersicht über alle Analysen
            </Typography>
            
            <Box
                sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 500 }} >
                <Tabs
                    orientation="vertical"
                    variant="scrollable"
                    value={value}
                    onChange={handleChange}
                    aria-label="Vertical tabs example"
                    sx={{ borderRight: 1, borderColor: 'divider' }}
                >
                    <Tab label="Barplot: Häufigkeit Artikel" {...a11yProps(0)} />
                    <Tab label="Barplot: Häufigkeit Marke" {...a11yProps(1)} />
                    <Tab label="Item Three" {...a11yProps(2)} />
                    <Tab label="Item Four" {...a11yProps(3)} />
                    <Tab label="Item Five" {...a11yProps(4)} />
                    <Tab label="Item Six" {...a11yProps(5)} />
                    <Tab label="Item Seven" {...a11yProps(6)} />
                </Tabs>
                <TabPanel value={value} index={0}>
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <DatePicker
                            label="Start Datum" 
                            format="DD.MM.YYYY"
                            value={dayjs(fromDate)} 
                            onChange={val => {setFromDate(val)}}
                        />
                        <DatePicker 
                            label="End Datum" 
                            format="DD.MM.YYYY"
                            value={dayjs(toDate)} 
                            onChange={val => {setToDate(val)}}
                        />
                        <Button variant="contained"
                            onClick={handlePlotButton}
                        >
                            Plotten
                        </Button>
                    </LocalizationProvider>
                    <Plot
                        data={[
                            {
                                type: 'bar', 
                                y: Array.from(Array(tableData.length).keys()),
                                x: tableData.map( (val) => (val.count) ),
                                orientation: 'h'
                            },
                        ]}
                        layout={ {height: 3500, title: 'Häufigkeit Artikel',
                            yaxis: {
                                tickvals: Array.from(Array(tableData.length).keys()),
                                ticktext: tableData.map( (val) => (val.article_name) ),
                                automargin: true,
                            }}
                        }
                    />
                </TabPanel>
                <TabPanel value={value} index={1}>
                <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <DatePicker
                            label="Start Datum" 
                            format="DD.MM.YYYY"
                            value={dayjs(fromDate)} 
                            onChange={val => {setFromDate(val)}}
                        />
                        <DatePicker 
                            label="End Datum" 
                            format="DD.MM.YYYY"
                            value={dayjs(toDate)} 
                            onChange={val => {setToDate(val)}}
                        />
                        <Button variant="contained"
                            onClick={handleBrandPlotButton}
                        >
                            Plotten
                        </Button>
                    </LocalizationProvider>
                    <Plot
                        data={[
                            {
                                type: 'bar', 
                                y: Array.from(Array(tableData.length).keys()),
                                x: tableData.map( (val) => (val.count) ),
                                orientation: 'h'
                            },
                        ]}
                        layout={ {height: 3500, title: 'Häufigkeit Marken',
                            yaxis: {
                                tickvals: Array.from(Array(tableData.length).keys()),
                                ticktext: tableData.map( (val) => (val.brand_name) ),
                                automargin: true,
                            }}
                        }
                    />
                </TabPanel>
                <TabPanel value={value} index={2}>
                    Item Three
                </TabPanel>
                <TabPanel value={value} index={3}>
                    Item Four
                </TabPanel>
                <TabPanel value={value} index={4}>
                    Item Five
                </TabPanel>
                <TabPanel value={value} index={5}>
                    Item Six
                </TabPanel>
                <TabPanel value={value} index={6}>
                    Item Seven
                </TabPanel>
                </Box>
            

            
            

        </div>
    );
}

export default AnalysesOverview