import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import clsx from "clsx";
import { useState } from "react";

function SubMenu({ items, isVisible, onLinkClick }) {
  const { t } = useTranslation();
  return (
    <div
      className={clsx(
        "absolute left-0 z-50 shadow-sm top-full border-t-3 border-primary dark:border-primary-dark bg-secondary dark:bg-secondary-dark rounded-2xl shadow-surface-variant-dark dark:shadow-primary",
        isVisible ? "block" : "hidden"
      )}
    >
      {items.map((subItem, index) => (
        <div
          key={index}
          className="px-6 py-2 cursor-pointer text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4"
          onClick={onLinkClick}
        >
          <Link to={subItem.path}>{t(subItem.name)}</Link>
        </div>
      ))}
      <svg
        className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark"
        width="16"
        height="13"
        viewBox="0 0 16 13"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M6.26795 1C7.03775 -0.333332 8.96225 -0.333334 9.73205 0.999999L14.9282 10C15.698 11.3333 14.7358 13 13.1962 13H2.80385C1.26425 13 0.301996 11.3333 1.0718 10L6.26795 1Z" />
      </svg>
    </div>
  );
}

function MenuBar({ menuItems }) {
  const { t } = useTranslation();
  const [activeMenu, setActiveMenu] = useState(null);
  return (
    <div className="flex justify-between pt-5 pb-2 text-base font-body">
      {menuItems.map((item, index) => (
        <div 
          key={index} 
          className="relative pb-3 cursor-pointer"
          onMouseEnter={() => setActiveMenu(index)}
          onMouseLeave={() => setActiveMenu(null)}
        >
          <Link to={item.path}>{t(item.name)}</Link>
          {item.submenu.length > 0 && <SubMenu items={item.submenu} isVisible={ activeMenu === index } onLinkClick={() => setActiveMenu(null)}/>}
        </div>
      ))}
    </div>
  );
}

MenuBar.propTypes = {
  menuItems: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      submenu: PropTypes.arrayOf(
        PropTypes.shape({
          name: PropTypes.string.isRequired,
          path: PropTypes.string.isRequired,
        })
      ),
      path: PropTypes.string,
    })
  ).isRequired,
};

SubMenu.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      path: PropTypes.string.isRequired,
    })
  ).isRequired,
  isVisible: PropTypes.bool.isRequired,
  onLinkClick: PropTypes.func.isRequired,
};

export default MenuBar;