import { useTranslation, withTranslation, Trans } from 'react-i18next';
import Container from '@mui/material/Container';
import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import Grid from '@mui/material/Grid'

const uid = "39e9009e-50e1-4277-bbf7-69e5e0f6c6dc"
const expenses_response = await fetch(`/GarageApp/api/expenses/${uid}`);
const fillups_response = await fetch(`/GarageApp/api/fillups/${uid}`);
const expenses = await expenses_response.json();
const fillups = await fillups_response.json();

function BasicSelect({ selectedAge,setSelectedAge }) {

  //const [age, setAge] = React.useState('30');

  const handleChange = (event: SelectChangeEvent) => {
    //setAge(event.target.value as string);
    setSelectedAge(event.target.value as string);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={selectedAge}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>This Week</MenuItem>
          <MenuItem value={20}>This Month</MenuItem>
          <MenuItem value={30}>Past 30 days</MenuItem>
          <MenuItem value={40}>Past 3 Months</MenuItem>
          <MenuItem value={50}>This Year</MenuItem>
          <MenuItem value={60}>All Time</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
};


export default function StatisticsView() {
  const { t, i18n } = useTranslation();
  const [selectedAge, setSelectedAge] = React.useState('30');
  
  return (
    <Container>
      <Grid container spacing={2} sx={{alignItems: "center",justifyContent: "space-between"}}>
        <Grid size="grow" sx={{justifyContent: "flex-start"}}>
          <h1>
            {t ('statistics')}
          </h1>
	  </Grid>
          <Grid size="auto">
            <BasicSelect selectedAge={selectedAge} setSelectedAge={setSelectedAge}/>
	  </Grid>
	</Grid>
      <Grid container spacing={2} sx={{alignItems: "center",justifyContent: "space-between"}}>
        <Grid size="grow" sx={{justifyContent: "flex-start"}}>
	  <h2>
	    {selectedAge}
	  </h2>
	</Grid>
      </Grid>
    </Container>

  );
}