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 { gropuedPrices, groupByOptions } from "../data";
import GroupGrid from "./components/GroupGrid";
import GroupChart from "./components/GroupChart";

function Chart() {
  const [group, setGroup] = React.useState<number>(0);
  const [groupData, setGroupData] = React.useState(gropuedPrices[group]);


  const handleChange = (event: SelectChangeEvent<number>) => {
    const selectedGroup = Number(event.target.value);
    setGroup(selectedGroup);
    setGroupData(gropuedPrices[selectedGroup]);
    // console.log(gropuedPrices[selectedGroup]);
  }

  return (
    <>
      <Navbar active="3" />
      <Box sx={{ width: "200px", m: "auto" }}>
        <FormControl fullWidth>
          <InputLabel> Group by </InputLabel>
          <Select<number>
            id="select-group"
            value={group}
            label="Group by"
            onChange={handleChange}
          >
            {groupByOptions.map((option, index) => (
              <MenuItem key={index} value={index}>
                {option}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Box>
      <GroupChart data={groupData} />
      <GroupGrid data={groupData} />
      <CustomFooter />
    </>
  );
}

export default Chart;