'use client'
import React from "react";
import styles from "@/styles/dev-tools.module.css"
import { Container, Select, Stack } from "@mui/material"
export default function Page(){

  return (
    <div className={styles.maincontainer}>
      <div className={styles.leftmenucontainer}>
        <LeftMenu />
      </div>
      <div className={styles.editorcontainer}>
        <Editor />
      </div>
    </div>
  )
}

function DynamicCard() {
  // to add a new kind of data type "map", "string", "bool", etc. they add a prop for it.
  return (
    <>
    </>
  )
}


interface Theme{
  value: string;
  label: string;
}
function LeftMenu(){
  const unitTypes: string[] = ["minion", "enemy", "hero", "ally"];
  const buildingTypes: string[] = ["enemy", "minion", "terrain", "support"];
  const [themes, setThemes] = React.useState<Theme[]>([]); // get from the database
  const [menuMode, setMenuMode] = React.useState<"unit" | "card">("card");
  return (
    <Container className={styles.leftmenu}>
      <Stack>
        Type
        <Select>
          <option value="">
            All types
          </option>
          {menuMode === "card" ? 
            buildingTypes.map((opt) => (<option value={opt}>{opt[0].toUpperCase() + opt.slice(1)}</option>)) : 
            unitTypes.map((opt) => (<option value={opt}>{opt[0].toUpperCase() + opt.slice(1)}</option>))
          }
        </Select>

        Theme
        <Select>
        </Select>
      </Stack>
    </Container>
  )
}


function Editor(){
  return (
    <Container className={styles.editor} maxWidth={false} disableGutters> 
      yes
    </Container>
  )
}