import React, { useState } from 'react';
import { Drawer, DrawerHeading } from '@digigov/ui/navigation/Drawer';
import { NavListAuto } from '@digigov/ui/navigation/NavList';
import { Heading } from '@digigov/ui/typography/Heading';

function useDrawer(): [boolean, () => void] {
  const [open, setOpen] = useState(true);
  function toggleDrawer() {
    setOpen(!open);
  }
  return [open, toggleDrawer];
}

const links = [
  { name: 'home', href: '#home', label: 'Αρχική' },
  {
    name: 'educational',
    label: 'Εκπαιδευτικό υλικό',
    menu: {
      links: [
        {
          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 Default = (_: any) => {
  const [open, toggleDrawer] = useDrawer();
  const layout = 'vertical';
  const border = false;
  const fixed = false;

  return (
    <Drawer upRelative="md" direction="left" open={open}>
      <DrawerHeading onClick={() => toggleDrawer()}>
        <Heading size="md">Επιλογές</Heading>
      </DrawerHeading>
      <NavListAuto
        layout={layout}
        links={links}
        border={border}
        fixed={fixed}
        aria-label="Nav list"
      ></NavListAuto>
    </Drawer>
  );
};

export default Default;