import { Button } from '@mui/material'
import {Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField } from '@mui/material'
//import {Autocomplete, createFilterOptions } from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';

import { Grid } from '@mui/material'

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
import Typography from '@mui/material/Typography';

import {useState, useEffect} from 'react'
import React from 'react'
import { useNavigate } from 'react-router-dom';

import axios from 'axios';

import SelectMarketField from "./selectMarket";
import UploadFiles from "./upload-files.component";


//const baseURL = "https://jsonplaceholder.typicode.com/comments";
const baseURL = "http://localhost:8000/api"


const PurchaseOverview = (props) => {
    const columns = [
        {
            field: 'edit_finished', 
            headerName: 'Fertig?',
            type: 'boolean',
            width: 100,
            editable: true,
        },
        {
            field: 'purchase_date', 
            headerName: 'Datum'
        },
        {
            field: 'market',
            headerName: 'Markt',
            valueGetter: (params) => { return params.row.market.name + ', ' + params.row.market.street + ' ' + params.row.market.street_number + ', ' + params.row.market.city},
            width: 400,
        },
        {
            field: 'total_price', 
            headerName: 'Gesamtpreis',
            flex: 1,
            valueFormatter: (params) => {
                if (params.value == null) {
                  return '';
                }
  
                //const valueFormatted = Number(params.value * 100).toLocaleString();
                return `${params.value} €`;
              },
        },
        //{field: 'body', headerName: 'Body'}
    ]
     
    const navigate = useNavigate();
    
    const [tableData, setTableData] = useState([]);
    const [openAddDialog, setOpenAddDialog] = useState(false);
    
    const [selectedDate, setSelectedDate] = React.useState(new Date());
    
    const handleDataGridClick = (e) => {
        //console.log(e.row)
        navigate('/PurchaseDetails', {state:e.row});

    }
    
    const handleClickAddDialogOpen = () => {
        setOpenAddDialog(true);
    };
    
    const handleClose = () => {
        setOpenAddDialog(false);
    };
    
    useEffect(()=>{      
        axios.get(baseURL+"/purchase/")
            .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 Einkäufe
            </Typography>

            <Button variant="contained"
                    onClick={handleClickAddDialogOpen}
            >
                Einkauf hinzufügen
            </Button>
            
            
            
            <Dialog open={openAddDialog} onClose={handleClose}>
                <DialogTitle>Einkauf hinzufügen</DialogTitle>
                <DialogContent>
                <DialogContentText>
                    Füge einen neuen Einkauf hinzu. Entweder per Datum und Markt oder per Upload eines Kassenzettels.
                </DialogContentText>
                    <Grid container spacing={1}>
                            <Grid item xs={5}>
                                <LocalizationProvider dateAdapter={AdapterDateFns}>
                                    <MobileDatePicker
                                        label="Datum des Einkaufs"
                                        value={selectedDate}
                                        onChange={(newValue) => {
                                            setSelectedDate(newValue);
                                        }}
                                        renderInput={(params) => <TextField {...params} />}
                                    />
                                </LocalizationProvider>
                            </Grid>
                            <Grid item xs={6}>
                                <SelectMarketField/>
                            </Grid>
                            <Grid item xs={12}>
                                <UploadFiles 
                                    apiURL='/purchase/post_receipe/'
                                    fileName='receipe'
                                    buttonText='Upload'
                                    applyBinarize={false}
                                    debug={true}
                                />
                            </Grid>
                    </Grid>
                </DialogContent>
                <DialogActions>
                <Button onClick={handleClose}>Abbrechen</Button>
                <Button onClick={handleClose}>Hinzufügen</Button>
                </DialogActions>
            </Dialog>
                <DataGrid 
                    rows={tableData}
                    columns={columns}
                    pageSize={10}
                    //checkboxSelection
                    //disableSelectionOnClick
                    onCellClick={handleDataGridClick}
                />   

        </div>
    )
    
}

export default PurchaseOverview
