import React from 'react';
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 {
  DrawerProvider,
  DrawerAuto,
  DrawerHeadingAuto,
  DrawerButtonAuto,
} from '@digigov/ui/navigation/Drawer/auto';
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 Auto = (_: any) => {
  const layout = 'vertical';
  const border = false;
  const fixed = false;

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

export default Auto;
