import React from 'react';
import { Button } from '@digigov/ui/form/Button';
import { GovGRFooter } from '@digigov/ui/govgr/Footer';
import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
import { BurgerIcon } from '@digigov/ui/icons';
import {
  AdminAside,
  AdminContainer,
  AdminLayout,
  AdminMain,
  AdminTopSection,
  AdminHeader,
  AdminHeaderContent,
} from '@digigov/ui/layouts/Admin';
import { Drawer, DrawerHeading } from '@digigov/ui/navigation/Drawer';
import { useDrawer } from '@digigov/ui/navigation/Drawer/hooks';
import { NavListAuto } from '@digigov/ui/navigation/NavList';
import { Heading } from '@digigov/ui/typography/Heading';

const links = [
  { name: 'Nav1', href: '#', label: 'Nav list item 1' },
  {
    name: 'Nav2',
    href: '#',
    label: 'Nav list item 2',
    menu: {
      links: [
        {
          name: 'Nav2.1',
          href: '#',
          label: 'Nav list item 2.1',
        },
        {
          name: 'Nav2.2',
          href: '#',
          label: 'Nav list item 2.2',
        },
        {
          name: 'Nav2.3',
          href: '#',
          label: 'Nav list item 2.3',
        },
        {
          name: 'Nav2.4',
          href: '#',
          label: 'Nav list item 2.4',
        },
      ],
    },
  },
  { name: 'Nav3', href: '#', label: 'Nav list item 3' },
];

export const WithHook = (_: any) => {
  const { registerDrawer, registerAction } = useDrawer();
  const layout = 'vertical';
  const border = false;
  const fixed = false;

  return (
    <AdminLayout>
      <AdminHeader>
        <AdminHeaderContent>
          <GovGRLogo></GovGRLogo>
          <Button
            {...registerAction('drawer-1', 'open')}
            className="md:hidden"
            color="secondary"
            style={{
              marginBottom: 0,
            }}
          >
            <BurgerIcon />
          </Button>
        </AdminHeaderContent>
      </AdminHeader>
      <AdminContainer>
        <AdminAside>
          <AdminTopSection></AdminTopSection>
          <Drawer
            {...registerDrawer('drawer-1', {
              upRelative: 'md',
              direction: 'left',
            })}
          >
            <DrawerHeading {...registerAction('drawer-1', 'close')}>
              <Heading size="md">Menu</Heading>
            </DrawerHeading>
            <NavListAuto
              layout={layout}
              border={border}
              links={links}
              fixed={fixed}
              aria-label="Nav list"
              role="menu"
            ></NavListAuto>
          </Drawer>
        </AdminAside>
        <AdminMain></AdminMain>
      </AdminContainer>
      <GovGRFooter />
    </AdminLayout>
  );
};