import * as React from "react";
import { useState } from "react";
import { Props } from "../";
import { Item, SubItem } from "../nav";
function useNavbar(
  items: Item[],
  onOpenLink: (subitem: SubItem) => void
): { navbar: Props; open: () => void; close: () => void } {
  const [isVisible, setIsVisible] = useState(false);
  const [openedItems, setOpenedItems] = useState<boolean[]>([]);
  function open() {
    setIsVisible(true);
  }
  function close() {
    setIsVisible(false);
  }
  function onOpenItem(index: number) {
    const newOpenedItems = [...openedItems];
    newOpenedItems[index] = true;

    setOpenedItems(newOpenedItems);
  }

  function onCloseItem(index: number) {
    const newOpenedItems = [...openedItems];
    newOpenedItems[index] = false;
    setOpenedItems(newOpenedItems);
  }
  return {
    open,
    close,
    navbar: {
      items,
      onOpenLink: (subitem) => {
        onOpenLink(subitem);
        close();
      },
      visible: isVisible,
      onClose: () => {
        setIsVisible(false);
        setOpenedItems([]);
      },
      openedItems,
      onOpenItem,
      onCloseItem,
    },
  };
}

export default useNavbar;