import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { inject } from 'mobx-react';

import { Box, HeroPortal, Tabs } from '@nova-hf/ui';

import { formatFirstName, profileColor, formatDate } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';
import SEO from 'utils/SEO';

import { IMenuList } from 'typings';
import Profile from 'store/models/Profile';
import UI from 'store/ui';
import Authentication from 'store/authentication';
import { useSubscriptionQuery } from 'typings/graphql';

import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import HeroCustomerSideMenu from 'containers/hero/customerSideMenu/HeroCustomerSideMenu';

import { getNavItems, NavItem } from 'utils/serviceNavLinks';
import { staffMenuLinksSecondLevel } from 'utils/staffMenuLinks';

interface IHeroProps {
  authentication?: Authentication;
  ui?: UI;
  subscriptionId: string;
  parentId?: string;
}

interface ISubNavigationProps {
  heroSubNav: NavItem[];
  color?: MainColorType;
}

const SubNavigation = ({ heroSubNav, color }: ISubNavigationProps) => {
  const { t } = useTranslation('subscription');
  const router = useRouter();

  const [selectedTab, setSelectedTab] = useState(heroSubNav[0].id);

  const subNavItemClick = (subNavItemId: string, url: string | undefined) => {
    setSelectedTab(subNavItemId);
    url && router.push(url);
  };

  const subNavItems = heroSubNav.map((item: IMenuList) => {
    return {
      id: item.id,
      label: t(item.title),
      href: item.href,
      onClick: () => subNavItemClick(item.id, item.href),
    };
  });

  const currentTabPath = subNavItems.find((item) => item.href === router.asPath.split('?')[0])?.id;
  const isInSettings = router.asPath.includes('/stillingar') ? 'settings' : '';

  return (
    <Tabs
      punctuationColor={color}
      tabBaseId="subNav"
      tabBaseLabel="subNav for selected subscription"
      selectedTab={currentTabPath || isInSettings || selectedTab}
      tabs={subNavItems}
    />
  );
};

const HeroSubscription = ({ authentication, ui, subscriptionId, parentId }: IHeroProps) => {
  if (!authentication) return null;

  const { isStaff, accountInput } = authentication;

  const router = useRouter();
  if (!router) return null;

  const { query } = router;

  const backLink = parentId ? `/thjonusta/${parentId}` : '/thjonustur';
  const defaultBackHref = `/${query.ssn}${backLink}`;

  const { loading, error, data } = useSubscriptionQuery({
    variables: { subscriptionId, accountInput },
  });

  let profile: Profile | null = null;

  if (!ui) return null;

  useEffect(() => {
    /*
      These ui updates are in a useEffect hook to prevent:
      Warning: Cannot update during and existing state transition
     */
    if (data?.me?.profiles?.[0]) {
      const p = new Profile(data?.me?.profiles?.[0]);
      ui?.setHasSideMenu(false);
      ui?.setHasCustomerMenu(true);
      ui?.setHeaderStyle(p.isNovaTV ? 'light' : 'dark');
      ui?.setPageColor(profileColor(p?.rateplan));
    }
  });

  if (loading) {
    return <Box>Loading</Box>;
  }
  if (error || !data?.me?.profiles || !data?.me?.profiles[0]) {
    return <Box>Error - no profile</Box>;
  }

  const {
    me: { profiles },
  } = data;
  if (!profiles) return null;

  const { name, email: primaryEmail } = profiles[0];

  const { title, ssn, accountSsn, accountName, email: serviceContactEmail } = profiles[0];

  profile = new Profile(profiles[0]);

  const { rateplan, created } = profile;

  const color = profileColor(rateplan) as MainColorType;
  const heroSubNav = getNavItems(query.ssn, profile, parentId);

  if (!heroSubNav || !heroSubNav?.shortCuts || !heroSubNav?.subNav) return null;

  const SEOTitle = () => {
    switch (rateplan?.typeId) {
      case 'service_bundle':
      case 'vip_service_bundle':
        return `${title} - ${rateplan?.title}`;
      default:
        return `${rateplan?.title} - ${title}`;
    }
  };

  const customerClick = (ssn: string) => {
    authentication?.setAccountInput(ssn);
    router.push(`/${ssn}/thjonustur`);
  };

  const customerMenuTitle = () => {
    if (isStaff && title !== subscriptionId) {
      return `${title} - ${subscriptionId}`;
    } else {
      return title;
    }
  };

  return (
    <>
      <HeroCustomerSideMenu
        title={customerMenuTitle() || ''}
        color={color}
        subTitle={rateplan?.title}
        icon="internet"
        backLink={defaultBackHref}
        {...(profile.statusCode !== 'signup' && { shortCuts: heroSubNav.shortCuts })}
        details={[{ label: 'Skráð', value: created && formatDate(created, 'dd.MM.yyyy') }]}
        staffMenuLinks={staffMenuLinksSecondLevel(profile)}
        {...(isStaff && {
          user: {
            name,
            nationalId: ssn,
            email: serviceContactEmail,
            address: `${data?.me?.userProfile?.streetAddress}, ${data?.me?.userProfile?.postalCode} ${data?.me?.userProfile?.city}`,
            onClick: () => customerClick(ssn),
          },
        })}
        {...(isStaff && {
          payer: {
            name: accountName,
            nationalId: accountSsn,
            email: accountInput?.ssn === accountSsn || ssn === accountSsn ? primaryEmail : '',
            onClick: () => customerClick(accountSsn),
          },
        })}
      />
      <HeroPortal color={color} title={formatFirstName(name)}>
        <SEO title={SEOTitle()} />
        <SubNavigation heroSubNav={heroSubNav.subNav} color={color} />
      </HeroPortal>
    </>
  );
};

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