import React from 'react';
import { Hero, HeroHeadline, HeroTitle, Subtitle } from '@nova-hf/ui';
import { HeroDock } from 'components/hero-dock/HeroDock';
import { HeroDockItem } from 'components/hero-dock/HeroDockItem';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';
import { inject } from 'mobx-react';
import { useRouter } from 'next/router';
import Authentication from 'store/authentication';
import Profile from 'store/models/Profile';
import { useTranslation } from 'utils/i18n';
import { getNovaTvSubscriptionNavItems } from 'utils/links';

interface INovaTvHeroProfileProps {
  profile: Profile;
  authentication: Authentication;
  childSubscriptionId?: string;
}

const NovaTvHeroProfile = ({
  profile,
  childSubscriptionId,
  authentication,
}: INovaTvHeroProfileProps) => {
  const { t } = useTranslation('subscription');

  const router = useRouter();

  const {
    query: { subscriptionId, ssn },
  } = router;

  const backLink = (p: Profile) => {
    if (childSubscriptionId) {
      return `/${ssn}/thjonusta/${p?.subscriptionId}`;
    }
    if (p?.ssn) {
      return `/${ssn}/thjonustur`;
    }
  };

  const askrift = profile?.subscriptions?.find((s) => s.id === childSubscriptionId);

  const dockItems = childSubscriptionId
    ? getNovaTvSubscriptionNavItems({
        subscriptionId: subscriptionId as string,
        ssn: ssn as string,
        childSubscriptionId,
      })
    : profile.getHeroSubNavigation(typeof ssn === 'string' ? ssn : ssn[0], authentication.isStaff);
  const heroSubtitle = childSubscriptionId ? 'NovaTV' : profile.accountName;
  const heroTitle = askrift?.plan?.product?.title || 'NovaTV';

  return (
    <>
      <Hero accentColor={'pink'} subHero background={'dark'} color={'light'} withDock lessPadding>
        <HeroHeadline accentColor={'pink'}>
          <Subtitle
            col={12}
            color={'white'}
            leftAlign
            linkComponent={<LinkWrapper href={backLink(profile)} />}
          >
            {heroSubtitle}
          </Subtitle>
          <HeroTitle subHero color={'white'}>
            {heroTitle}
          </HeroTitle>
        </HeroHeadline>
      </Hero>
      {
        <HeroDock inverted subDock color={'pink'}>
          {dockItems.map((item) => {
            return (
              <HeroDockItem
                key={item.id}
                className={item.className}
                title={t(item.title)}
                href={item.href}
                addService={item.addService}
                newTab={item.newTab ?? false}
                selected={
                  router.asPath.split('?')[0] === item.href ||
                  (item.id === 'settings' && router.asPath.includes('/stillingar'))
                }
              />
            );
          })}
        </HeroDock>
      }
    </>
  );
};

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