import React from "react";
import styles from "@/styles/dev-tools.module.css"
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { Container, Select, Stack, MenuItem, InputLabel, Typography } from "@mui/material"
import { buildingTypes, unitTypes } from "@/types/dev-tools-extra";
import { useEditor } from "@/hooks/useEditor";

const debugCard = [
  {
    id: "terrain_forest",
    label: "Forest",
    children: [
      {
        id: "terrain_haunted_forest",
        label: "Haunted Forest",
        children: [
          {
            id: 'terrain_undead_candy_forest',
            label: "Undead Candy Forest"
          }
        ]
      }
    ]
  },
]

export default function LeftMenu(){

  //const [themes, setThemes] = React.useState<ThemeSelection[]>([]); // get from the database
  const [menuMode, setMenuMode] = React.useState<"unit" | "card">("card");
  const { changeCurrentDataId } = useEditor();

  const handleSelectAsset = (_e: React.MouseEvent<Element, MouseEvent>, id: string) => {
    changeCurrentDataId!(id);
  }
  return (
    <Container className={styles.leftmenu}>
      <Stack >
        <Typography id="assetTypeFilter">Asset Type</Typography>       
        <Select className="assetTypeFilter">
          <MenuItem value="">All</MenuItem>
          {menuMode === "card" ? 
            buildingTypes.map((opt, i) => (<MenuItem value={opt} key={i}>{opt[0].toUpperCase() + opt.slice(1)}</MenuItem>)) : 
            unitTypes.map((opt, i) => (<MenuItem value={opt} key={i}>{opt[0].toUpperCase() + opt.slice(1)}</MenuItem>))
          }
        </Select>

        <InputLabel id="themeFilter">Theme</InputLabel>       
        <Select className="themeFilter" label="Theme" >
          <MenuItem value="">All</MenuItem>
        </Select>
        
      </Stack>
      <Typography >
        Current {menuMode}s created
      </Typography>
      <RichTreeView items={debugCard} onItemClick={handleSelectAsset}>
      </RichTreeView>
    </Container>
  )
}