import React from "react";

import type { FC } from "react";

import { onKeyDown } from "../../../../utils/onKeyDown";

import {DesktopMenuItem} from '../Desktop/DesktopMenuItem'

import { navIconStyling, desktopNavListItemStyling } from "../../styles/header.styles";

import type { NavProps } from "../../header.types";
import { Icon } from "../../../../molecules/Icon";
import { cssMerge } from "../../../../utils/cssMerge";
import { desktopNavStyling } from "../../styles/header.styles";

export const DesktopNav: FC<NavProps> = ({ menus, openMenu, setOpenMenu }) => {

  return (
    <ul className="tw-flex tw-gap-8">
      {menus &&
        menus.map((menu, index: number) => {
          if (!menu) {
            return null;
          }
          const isOpen = index === openMenu;
          const menuItems = menu && menu.menuItems;

          return (
            <li
              onMouseEnter={() => setOpenMenu(index)}
              onKeyDown={(e) => onKeyDown(e, () => setOpenMenu(index))}
              tabIndex={0}
              className={cssMerge(desktopNavListItemStyling({ color: menu.colorScheme }))}
            >
              {menu.heading && (
                <>
                  <span className="eyebrow !tw-text-md !tw-text-gray-400 hover:!tw-text-common-white">
                    {menu.heading}
                  </span>
                  <Icon
                    id="chevron"
                    className={cssMerge(navIconStyling({ isOpen }))}
                    stroke="currentColor"
                    size={12}
                  />
                  {menuItems && isOpen && (
                    <ul className={cssMerge(desktopNavStyling())}>
                      {menuItems.map((menuItem, index) => <DesktopMenuItem key={menuItem.heading} iconColor={menu.colorScheme} isSibling={index !== 0} {...menuItem} />)}
                    </ul>
                  )}
                </>
              )}
            </li>
          );
        })}
    </ul>
  );
};
