import Navbar from "../components/Navbar";
import CustomFooter from "../components/CustomFooter";
import Select from '@mui/material/Select';
import type { SelectChangeEvent } from '@mui/material/Select';
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 * as React from 'react';
import {years, countries, types } from "./groupdata";
import GroupGrid from "./components/GroupGrid";
import GroupChart from "./components/GroupChart";

type tSelect = "Страна" | "Год" | "Тип";

function Chart() {
  const [group, setGroup] = React.useState<tSelect>("Страна");
  const [groupData, setGroupData] = React.useState(countries);


  const handleChange = (event: SelectChangeEvent) => {
    setGroup(event.target.value as tSelect);
    setGroupData([countries, years, types][["Страна", "Год", "Тип"].indexOf(event.target.value)]);
  }

  return (
    <>
      <Navbar active="3" />
      <Box sx={{ width: "200px", m: "auto" }}>
        <FormControl fullWidth>
          <InputLabel> Группировать по </InputLabel>
          <Select
            id="select-group"
            value={group}
            label="Группировать по"
            onChange={handleChange}
          >
            <MenuItem value="Страна"> Стране </MenuItem>
            <MenuItem value="Год"> Году </MenuItem>
            <MenuItem value="Тип"> Типу </MenuItem>
          </Select>
        </FormControl>
      </Box>
      <GroupChart data={groupData} />
      <GroupGrid data={groupData} />
      <CustomFooter />
    </>
  );
}

export default Chart;