import React from 'react';
import { Navbar } from '@nova-hf/ui';
import { BreakPointsType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { setUser } from '@sentry/browser';
import UserMenu from 'components/user-menu/UserMenu';
import { inject, observer } from 'mobx-react';
import Link from 'next/link';
import Authentication from 'store/authentication';
import Profiles from 'store/profiles';
import UI from 'store/ui';
import { useMeQuery, UserProfile } from 'typings/graphql';
import { formatFirstName } from 'utils/helpers';
import { getLinks } from 'utils/links';

type HeaderProps = {
  isHome?: boolean;
  isHidden?: boolean;
  inNav?: boolean;
  hasSideCart?: boolean;
  profiles?: Profiles;
  ui?: UI;
  authentication?: Authentication;
};
const Header = ({ profiles, ui, authentication }: HeaderProps) => {
  const setSentryUser = (userProfile: UserProfile) => {
    setUser({
      id: userProfile.ssn ?? '',
      username: userProfile.name ?? '',
      email: userProfile.email ?? '',
    });

    if (profiles) profiles.isCompany = !!userProfile.isCompany;
    if (userProfile.isCompany && ui) {
      ui.toggleView('list');
      ui.pageColor = 'purple';
    }
  };

  const isRegistered = (subscriptionLevel: string) => {
    if (profiles) profiles.isRegistered = subscriptionLevel !== 'UNREGISTERED';
  };

  if (!authentication) return null;

  const { accountInput } = authentication;
  const { loading, error, data } = useMeQuery({ variables: { accountInput } });

  if (error || loading || !data) return null;

  const { isStaff, username, email } = authentication;

  if (data.me && data?.me?.userProfile) {
    const user = data.me.userProfile;
    setSentryUser(user);
  }
  if (data.me && data?.me?.subscriptionLevel) {
    isRegistered(data.me.subscriptionLevel);
  }

  const statusText = username ? formatFirstName(username) : email ? email.split('@')[0] : '...';
  const { more } = getLinks(authentication.isStaff);

  const hideLogo = (): BreakPointsType[] => {
    if (ui?.hasSideMenu) {
      return ['md', 'lg', 'xl'];
    } else if (ui?.hasCustomerMenu) {
      return ['sm', 'md', 'lg', 'xl'];
    } else {
      return [];
    }
  };

  return (
    <Navbar
      zIndex={ui?.isMegaMenuOpen ? 9999999 : 20}
      isInverted={ui!.headerStyle === 'light' || ui!.isMegaMenuOpen}
      onMenuClick={() => ui?.setIsMegaMenuOpen(!ui.isMegaMenuOpen)}
      logo={{
        hideOn: hideLogo(),
        wrapper: (link) => (
          <Link href={'/'} passHref legacyBehavior>
            {link}
          </Link>
        ),
      }}
      menuIsOpen={ui?.isMegaMenuOpen}
      navbarItem={[
        {
          id: 'search',
          icon: 'search',
          tooltipText: 'Leita',
          onClick: () => ui?.setIsMegaMenuOpen(false),
          ...(!isStaff && { href: more.search.link }),
          ...(isStaff && {
            wrapper: (link) => (
              <Link href="/staff" passHref legacyBehavior>
                {link}
              </Link>
            ),
          }),
        },
        {
          id: 'twoForOne',
          icon: 'twoForOne',
          tooltipText: more.fyrir.name,
          href: more.fyrir.link,
          openInNewTab: true,
        },
        {
          id: 'refill',
          icon: 'refill',
          tooltipText: more.fylltann.name,
          href: more.fylltann.link,
          openInNewTab: true,
        },
      ]}
      navbarStatus={{
        isStaff: isStaff,
        isLoggedIn: true,
        text: statusText,
        onClick: () => {},
        wrapper: (child) => <UserMenu>{child}</UserMenu>,
      }}
    />
  );
};

export default inject('ui', 'profiles', 'authentication')(observer(Header));