import { AppProps } from 'next/app';
import React, { FunctionComponent, useState } from 'react';
import {
  EuiCollapsibleNav,
  EuiCollapsibleNavGroup,
  EuiFlexGroup,
  EuiFlexItem,
  EuiHeader,
  EuiHeaderLogo,
  EuiHeaderSectionItemButton,
  EuiIcon,
  EuiListGroup,
  EuiPage,
} from '@elastic/eui';

import './app.scss';

import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group/list_group_item';

const EuiApp: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
  const [navIsopen, setNavIsOpen] = useState(true);
  const LearnLinks: EuiListGroupItemProps[] = [
    { label: 'Docs', href: '#/navigation/collapsible-nav' },
    { label: 'Blogs', href: '#/navigation/collapsible-nav' },
    { label: 'Webinars', href: '#/navigation/collapsible-nav' },
    { label: 'Elastic.co', href: 'https://elastic.co' },
  ];
  const collapsibleNav = (
    <EuiCollapsibleNav
      isOpen={navIsopen}
      isDocked={false}
      showButtonIfDocked={true}
      button={
        <EuiHeaderSectionItemButton onClick={() => setNavIsOpen(!navIsopen)}>
          <EuiIcon type={'menu'} size="m" aria-hidden="true" />
        </EuiHeaderSectionItemButton>
      }
      onClose={() => setNavIsOpen(false)}>
      <EuiFlexItem className="eui-yScroll">
        <EuiCollapsibleNavGroup
          title="Learn"
          iconType="training"
          isCollapsible={true}
          initialIsOpen={false}>
          <EuiListGroup aria-label="Learn" listItems={LearnLinks} />
        </EuiCollapsibleNavGroup>
      </EuiFlexItem>
    </EuiCollapsibleNav>
  );
  const leftSectionItems = [
    collapsibleNav,
    // eslint-disable-next-line react/jsx-key
    <EuiHeaderLogo iconType="logoElastic">Elastic</EuiHeaderLogo>,
  ];
  return (
    <>
      <EuiFlexGroup gutterSize="none" direction="column">
        <EuiHeader
          position="fixed"
          sections={[
            {
              items: leftSectionItems,
              borders: 'right',
            },
          ]}
        />
        <EuiPage />
      </EuiFlexGroup>
    </>
  );
};

export default EuiApp;