import React, { Fragment, useState } from 'react';
import CloseButton from '@digigov/react-core/CloseButton';
import BurgerIcon from '@digigov/react-icons/BurgerIcon';
import { Button } from '@digigov/ui/form/Button';
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 HorizontalWithDrawer = (_: any) => {
  const layout = 'horizontal';
  const drawer = 'mdDown';
  const border = false;
  const { registerNavItemMenu, registerNavItem } = useNavList();
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button color="secondary" onClick={() => setOpen(!open)} mdUpHidden>
        Επιλογές <BurgerIcon />
      </Button>
      <Nav
        border={border}
        aria-orientation={layout || 'horizontal'}
        aria-label="navigation list"
        open={open}
        drawer={drawer}
      >
        <CloseButton mdUpHidden onClick={() => setOpen(false)}>
          Κλείσιμο
        </CloseButton>
        <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 HorizontalWithDrawer;