import { FormControl, InputLabel, MenuItem, Select, type SelectChangeEvent } from "@mui/material";
import "simplebar-react/dist/simplebar.min.css";
import "./App.css";

import data from "./assets/data/2.0/data.json";
import SelectMenu from "./assets/SelectRecipeMenu";
import { useMemo, useState } from "react";

function App() {
  const [group, setGroup] = useState("Signals");
  const handleChange = (event: SelectChangeEvent) => {
    setGroup(event.target.value);
  };
  const categories = useMemo(() => (group == "Signals" ? data.signalGroup : data.recipeGroup), [group]);
  return (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">Groups</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={group}
            label="Age"
            onChange={handleChange}
          >
            <MenuItem value={"Signals"}>Signals</MenuItem>
            <MenuItem value={"Recipes"}>Recipes</MenuItem>
          </Select>
        </FormControl>
        <SelectMenu categories={categories} title={`Select ${group.toLowerCase()}`}></SelectMenu>
      </div>
      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
    </>
  );
}

export default App;
