import { useState, type CSSProperties, useMemo } from "react";
import data from "./data/2.0/data.json";
import Icon from "./icon";
import "./SelectRecipeMenu.css";
import Tooltip from "./Tooltip";
type SelectMenuProps = {
  className?: string;
  style?: CSSProperties;
};

export type SubGroup<T> = {
  name: string;
  order?: string;
  children: Array<T>;
};
const ITEM_PER_ROW = 10;

interface SubGroupProps {
  subgroup: SubGroup<{ name: string; icon: string }>;
  selectedItem: string;
  onSelectItem: (name: string) => void;
}
function SubGroupRow({ subgroup, selectedItem, onSelectItem }: SubGroupProps) {
  const emptySlotsCounts = useMemo(() => {
    const lastRowSlots = subgroup.children.length % ITEM_PER_ROW;
    return lastRowSlots > 0 ? ITEM_PER_ROW - lastRowSlots : 0;
  }, [subgroup]);
  return (
    <div className="select-menu-content-row">
      {subgroup.children.map((o) => (
        <Tooltip title={o.name} key={o.name}>
          <div
            className={"select-menu-icon " + (o.name == selectedItem ? "active" : "")}
            onClick={() => onSelectItem(o.name)}
          >
            <Icon iconName={o.icon} size={30}></Icon>
          </div>
        </Tooltip>
      ))}
      {Array(emptySlotsCounts)
        .fill(0)
        .map((_, i) => (
          <div className="select-menu-slot" key={i}>
            <div className="select-menu-slot-empty"></div>
          </div>
        ))}
    </div>
  );
}
function SelectMenu({ style, className }: SelectMenuProps) {
  const [category, setCategory] = useState(data.signalGroup[0].name);
  const [item, selectItem] = useState("");
  const [showSearch, setShowSearch] = useState(false);
  const [search, setSearch] = useState("");
  const content = useMemo(() => data.signalGroup.find((r) => r.name == category), [category]);
  return (
    <div style={style} className={"select-menu " + className}>
      <div className="select-menu-header">
        <div className="select-menu-header-title">Title</div>
        <div className="select-menu-header-spacer"></div>
        <div className="select-menu-header-action">
          {showSearch && (
            <input
              type="search"
              onChange={(evt) => setSearch(evt.target.value)}
              value={search}
            ></input>
          )}
          <button
            className={"panel-button " + (showSearch ? "active" : "")}
            onClick={() => setShowSearch(!showSearch)}
          >
            <img src="/assets/search.png" />
          </button>
          <button className="panel-button">
            <img src="/assets/close.png" />
          </button>
        </div>
      </div>
      <div className="select-menu-group">
        {data.signalGroup.map((g) => (
          <div
            className={"select-menu-group-icon " + (g.name == category ? "active" : "")}
            onClick={() => setCategory(g.name)}
            key={g.name}
          >
            <Icon iconName={g.icon} size={62}></Icon>
          </div>
        ))}
      </div>
      <div className="select-menu-content">
        {content?.subGroup.map((subgroup) => (
          <SubGroupRow
            subgroup={subgroup}
            selectedItem={item}
            onSelectItem={selectItem}
            key={subgroup.name}
          ></SubGroupRow>
        ))}
      </div>
    </div>
  );
}
export default SelectMenu;
