import React, { ReactNode } from 'react';
import { CustomerMenu } from '@nova-hf/ui';
import { CustomerDisplay } from '@nova-hf/ui/umd/ts/src/sidemenu/CustomerMenu';
import { LinkProps as StaffLinkProps } from '@nova-hf/ui/umd/ts/src/sidemenu/StaffMenuLink';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { inject } from 'mobx-react';
import Link from 'next/link';
import Authentication from 'store/authentication';
import UI from 'store/ui';
import { useTranslation } from 'utils/i18n';
import { NavItem } from 'utils/serviceNavLinks';

import NovaLogo from './components/NovaLogo';
interface IHeroCustomerSideMenuProps {
  authentication?: Authentication;
  ui?: UI;
  color?: MainColorType;
  title?: string;
  subTitle?: string;
  icon?: string;
  backLink?: string;
  shortCuts?: NavItem[];
  details: { label: string; text: string };
  user?: CustomerDisplay;
  payer?: CustomerDisplay;
  staffMenuLinks: Array<Omit<StaffLinkProps, 'isStaffMenuOpen'>>;
}

const HeroCustomerSideMenu = ({
  authentication,
  ui,
  title,
  subTitle,
  icon,
  color,
  backLink,
  shortCuts,
  details,
  staffMenuLinks,
  user,
  payer,
}: IHeroCustomerSideMenuProps) => {
  if (!authentication) return null;
  const { isStaff } = authentication;
  const { t } = useTranslation(['common', 'stillingar']);

  const actionButtons = shortCuts?.map(({ title, href, icon, openInNewTab }: NavItem) => ({
    text: t(title),
    icon,
    renderAs: 'a',
    ...(openInNewTab && { target: '_blank' }),
    ...(openInNewTab && { href: href }),
    ...(!openInNewTab && {
      wrapper: (link: React.ReactNode) => (
        <Link href={href} passHref legacyBehavior>
          {link}
        </Link>
      ),
    }),
  }));

  return (
    <>
      <CustomerMenu
        isStaff={isStaff}
        staffMenuLinks={staffMenuLinks}
        color={color}
        title={title}
        subtitle={subTitle}
        icon={icon}
        extraInfo={[
          {
            leftList: {
              label: details.label,
              list: [{ text: details.text }],
            },
          },
        ]}
        {...(backLink && {
          backButton: {
            renderAs: 'a',
            colorScheme: color,
            text: 'Til baka',
            icon: 'longArrowLeft',
            wrapper: (link: ReactNode) => (
              <Link href={backLink} passHref legacyBehavior>
                {link}
              </Link>
            ),
          },
        })}
        actionButtons={actionButtons}
        userLabel="Notandi"
        payerLabel="Greiðandi"
        user={user}
        payer={payer}
        mainButton={
          isStaff
            ? {
                renderAs: 'a',
                text: 'Stofna nýtt mál',
                icon: 'add',
                colorScheme: color,
                dottedShadow: 'none',
                target: '_blank',
                href: 'https://novadesk.zendesk.com/agent/tickets/new/1',
              }
            : {
                text: 'Vantar þig aðstoð?',
                icon: 'chat',
                colorScheme: color,
                dottedShadow: 'none',
                onClick: () => ui?.setIsContactMenuOpen(true),
              }
        }
      />
      {isStaff && <NovaLogo />}
    </>
  );
};

export default inject('authentication', 'ui')(HeroCustomerSideMenu);