import React, { useState } from 'react';
import ChevronIcon from '@digigov/react-icons/ChevronIcon';
import {
  Header,
  HeaderSection,
  HeaderContent,
  HeaderTitle,
} from '@digigov/ui/app/Header';
import { Button } from '@digigov/ui/form/Button';
import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
import { Top } from '@digigov/ui/layouts/Basic/Top';
import { Link } from '@digigov/ui/navigation/Link';
import {
  Nav,
  NavMenuContainer,
  NavMenuTitle,
  NavMenuContent,
  NavMenuContentList,
  NavMenuContentListItem,
} from '@digigov/ui/navigation/NavList';
import { Paragraph } from '@digigov/ui/typography/Paragraph';

const links: any = [];
for (let index = 0; index < 14; index++) {
  links.push({
    name: `Nav${index}`,
    label: `σύνδεσμος ${index + 1}`,
    href: `?q=item${index + 1}`,
  });
}

const menuLabel = 'Επιλογές';
const menuTitle = 'Επιλογές της υπηρεσίας';

export const UsingHeaderButton = (_: any) => {
  const [open, setOpen] = useState(false);

  return (
    <Top>
      <Header>
        <HeaderContent>
          <HeaderSection>
            <GovGRLogo href="#" />
            <HeaderTitle>Τίτλος Υπηρεσίας</HeaderTitle>
          </HeaderSection>
          <HeaderSection>
            <Button variant="link" onClick={() => setOpen(!open)}>
              {menuLabel}
              <ChevronIcon direction={open ? 'up' : 'down'} />
            </Button>
          </HeaderSection>
        </HeaderContent>
      </Header>
      <Nav
        open={open}
        drawer="smDown"
        onClose={() => setOpen(false)}
        closeButtonLabel="Κλείσιμο"
        aria-label="navigation list"
      >
        <NavMenuContainer active={open}>
          <NavMenuContent md={12}>
            <Paragraph>
              Εξερευνήστε τις δυνατότητες της Υπηρεσίας, επιλέγοντας από τους
              παρακάτω συνδέσμους:
            </Paragraph>
          </NavMenuContent>
          <NavMenuTitle>{menuTitle || menuLabel}</NavMenuTitle>
          <NavMenuContent>
            <NavMenuContentList role="menu">
              {links &&
                links.map((item, menuIndex) => {
                  return (
                    <NavMenuContentListItem key={menuIndex} role="presentation">
                      {item?.href && (
                        <Link role="menuitem" id={item.name} href={item.href}>
                          {item.label}
                        </Link>
                      )}
                    </NavMenuContentListItem>
                  );
                })}
            </NavMenuContentList>
          </NavMenuContent>
        </NavMenuContainer>
      </Nav>
    </Top>
  );
};

export default UsingHeaderButton;