import React, { Fragment } from 'react';
import { Link } from '@digigov/ui/navigation/Link';
import {
  Nav,
  NavList,
  NavListItemAction,
  NavMenuContainer,
  NavMenuContent,
  NavMenuContentList,
  NavMenuContentListItem,
  NavMenuTitle,
  useNavList,
} from '@digigov/ui/navigation/NavList';

const links = [
  { name: 'home', href: '#home', label: 'Αρχική' },
  {
    name: 'educational',
    label: 'Εκπαιδευτικό υλικό',
    subMenuHeading: 'Εκπαιδευτικό υλικό',
    subMenu: [
      {
        name: 'elearning',
        href: '#elearning',
        label: 'Εκπαιδευτική πλατφόρμα',
      },
      {
        name: 'videos',
        href: '#videos',
        label: 'Βίντεο',
      },
      {
        name: 'presentations',
        href: '#presentations',
        label: 'Παρουσιάσεις',
      },
      {
        name: 'promoting',
        href: '#promoting',
        label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά',
      },
      {
        name: 'other-texts',
        href: '#other-texts',
        label: 'Άλλα κείμενα',
      },
    ],
  },
  { name: 'news', href: '#news', label: 'Νέα' },
];

export const HorizontalWithoutDrawer = (_: any) => {
  const layout = 'horizontal';
  const border = false;
  const { registerNavItemMenu, registerNavItem } = useNavList();
  return (
    <Nav
      border={border}
      aria-orientation={layout || 'horizontal'}
      aria-label="navigation list"
    >
      <NavList layout={layout}>
        {links.map((item, key) => (
          <Fragment key={key}>
            <NavListItemAction {...registerNavItem(item)}>
              {item.label}
            </NavListItemAction>
            {item.subMenu && (
              <NavMenuContainer
                layout={layout}
                {...registerNavItemMenu(item.name)}
              >
                <NavMenuTitle>{item.label}</NavMenuTitle>
                <NavMenuContent>
                  <NavMenuContentList role="menu">
                    {item.subMenu?.map((subMenu, menuIndex) => {
                      return (
                        subMenu?.href && (
                          <NavMenuContentListItem
                            key={menuIndex}
                            role="presentation"
                          >
                            <Link
                              role="menuitem"
                              id={subMenu.name}
                              href={subMenu.href}
                            >
                              {subMenu.label}
                            </Link>
                          </NavMenuContentListItem>
                        )
                      );
                    })}
                  </NavMenuContentList>
                </NavMenuContent>
              </NavMenuContainer>
            )}
          </Fragment>
        ))}
      </NavList>
    </Nav>
  );
};

export default HorizontalWithoutDrawer;