import * as React from 'react';
import SVGArrow from 'assets/svg/arrow-right.svg';
import SVGLogo from 'assets/svg/nova-logo.svg';
import SVGPin from 'assets/svg/pin.svg';
import SVGPopUp from 'assets/svg/popup.svg';
import classnames from 'classnames/bind';
import { inject, observer } from 'mobx-react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import UI from 'store/ui';

import s from './NavigationPanel.module.scss';

const cn = classnames.bind(s);

interface ICustomerLink {
  title: string;
  name: string;
  email: string;
  ssn: string;
  address?: string;
  onClick: () => void;
  to: string;
}

interface INavigationPanelProps {
  ui?: UI;
  background?: string;
  color?: string;
  customerLinkList?: Array<ICustomerLink>;
  mainList?: React.ReactNode;
  otherList: React.ReactNode;
  created?: string;
}

interface IPanelListProps {
  linkType: 'link' | 'subLink' | 'hoverLink';
  children?: React.ReactNode;
  color?: string;
}

interface IPanelItemProps {
  ui?: UI;
  title: string;
  href: string;
  children?: React.ReactNode;
  color?: string;
  newTab?: boolean;
}

export const PanelItem = inject('ui')(({ ui, title, children, href, newTab }: IPanelItemProps) => {
  const router = useRouter();
  const selectedItem = router?.asPath.split('?')[0] == href;
  const onLinkClick = () => {
    if (ui?.isMobile) {
      ui.toggleNavigationPanel();
    }
  };

  const tab = newTab && {
    target: '_blank',
    rel: 'noopener noreferrer',
  };
  return (
    <li className={s.navigationPanel__navItem}>
      {newTab ? (
        <a
          href={href}
          className={cn(s.navigationPanel__navLink, { selected: selectedItem })}
          {...tab}
          onClick={onLinkClick}
        >
          <span className={s.navigationPanel__navLinkTitle}>{title}</span>
          {newTab && (
            <span className={s.navigationPanel__navLinkNewTab}>
              <SVGPopUp className={s.navigationPanel__navLinkNewTabIcon} />
            </span>
          )}
        </a>
      ) : (
        <Link
          href={href}
          className={cn(s.navigationPanel__navLink, { selected: selectedItem })}
          {...tab}
          onClick={onLinkClick}
        >
          <span className={s.navigationPanel__navLinkTitle}>{title}</span>
          {newTab && (
            <span className={s.navigationPanel__navLinkNewTab}>
              <SVGPopUp className={s.navigationPanel__navLinkNewTabIcon} />
            </span>
          )}
        </Link>
      )}
      {children}
    </li>
  );
});

export const PanelList = ({ linkType, children, color }: IPanelListProps) => {
  return (
    <ul className={cn(s.navigationPanel__navList, linkType)}>
      {React.Children.toArray(children).map((c, i) =>
        React.cloneElement(c as React.ReactElement<any>, { color, key: i }),
      )}
    </ul>
  );
};

const NavigationPanel = ({
  ui,
  background,
  mainList,
  otherList,
  customerLinkList,
  created,
}: INavigationPanelProps) => {
  React.useEffect(() => {
    window.addEventListener('scroll', onScroll, true);

    return () => {
      window.removeEventListener('scroll', onScroll, true);
    };
  });

  const onScroll = () => {
    ui?.scrollNavigationPanel();
  };

  return (
    <div
      className={cn(s.navigationPanel, `background-${background}`, {
        isOpen: ui?.isNavigationPanelOpen,
        isClosed: !ui?.isNavigationPanelOpen,
      })}
    >
      <div className={s.navigationPanel__wrapper}>
        <div className={s.navigationPanel__content}>
          <div className={s.navigationPanel__top}>
            <div className={s.navigationPanel__logo}>
              <a href="/">
                <SVGLogo className={s.navigationPanel__logoSVG} />
              </a>
            </div>
            <div className={s.navigationPanel__navWrapper}>
              {mainList && (
                <div className={s.navigationPanel__nav}>
                  <div className={s.navigationPanel__navTitle}>Stóllinn</div>
                  {mainList}
                </div>
              )}
              {otherList && (
                <div className={cn(s.navigationPanel__nav, 'mobileHoverLeft')}>
                  <div className={s.navigationPanel__navTitle}>Annað</div>
                  {otherList}
                </div>
              )}
            </div>
          </div>

          {customerLinkList && (
            <div className={s.navigationPanel__profiles}>
              {created && (
                <div className={s.navigationPanel__created}>
                  <span className={s.navigationPanel__label}>{'Skráð: '}</span>
                  {created}
                </div>
              )}
              {customerLinkList.map(
                ({ title, ssn, name, email, address, onClick, to }: ICustomerLink) => (
                  <div key={title} className={s.navigationPanel__profileInfo}>
                    <Link href={to} className={s.navigationPanel__link} onClick={() => onClick()}>
                      <span className={s.navigationPanel__label}>{title}</span>
                      <br />
                      {name}
                      <br />
                    </Link>
                    {address && <div>{address}</div>}
                    <div>{ssn}</div>
                    <div>{email}</div>
                  </div>
                ),
              )}
            </div>
          )}

          <button
            className={cn(s.navigationPanel__pin, {
              isPinned: ui?.isNavigationPanelPinned,
            })}
            onClick={() => ui?.toggleNavigationPanelPin()}
          >
            <SVGPin className={s.navigationPanel__pinSVG} />
          </button>
        </div>

        <button className={s.navigationPanel__open} onClick={() => ui?.toggleNavigationPanel()}>
          <SVGArrow className={s.navigationPanel__openSVG} />
        </button>
      </div>
    </div>
  );
};

const NavigationPanelWrapper = inject('ui')(observer(NavigationPanel));

export default NavigationPanelWrapper;