import { BaseProps } from "../../Factory/BaseType";
import MenuView from "./MenuView";
import menuJson from "./index.json";
import { useEffect, useState } from "react";
import { useEffectiveStyle } from "../../utils/useEffectiveStyle";

export type MenuProps = BaseProps & {
  menuItems?: ItemProps[];
  onNavigate?: (
    callBack: undefined,
    path: string,
    navigationType: string
  ) => void;
  loadMenuDetails?:  (callBack: (menuItems: ItemProps[]) => void) => Promise<void>;
};
export type ItemProps = {
  label: string;
  path: string;
  displayType: "TEXT" | "IMAGE",
  subItems: ItemProps[];
  navigationType: string;
  onNavigate: (path: string, navigationType: string) => void;
};

const Menu = (props: MenuProps) => {

  const [menu, setMenu] = useState<ItemProps[]>([]);

  useEffectiveStyle(props.widgetStyle);

  useEffect(() => {
    props.loadMenuDetails?.(result => setMenu(result));
  },[])

  const onNavigate = (path: string, navigationType: string) => {
    props.onNavigate?.(undefined, path, navigationType);
  };

  return (
    <MenuView
      menuItems={props.menuItems ?? menu}
      onNavigate={onNavigate}
    />
  );
};
export default Menu;