import * as React from 'react';
import { useQuery } from '@apollo/client';
import { ContainerDeprecated } from '@nova-hf/ui';
import Wrapper from 'components/app-layout/Wrapper';
import { ToggleItem } from 'components/toggle-items/ToggleItem';
import { ToggleItems } from 'components/toggle-items/ToggleItems';
import { ToggleItemsContainer } from 'components/toggle-items/ToggleItemsContainer';
import HeroProfile from 'containers/hero/HeroProfile';
import { SUBSCRIPTION } from 'graphql/queries/subscription';
import { inject } from 'mobx-react';
import { useRouter } from 'next/router';
import Authentication from 'store/authentication';
import Profile from 'store/models/Profile';
import { IUserData } from 'typings';
import { profileColor } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';
import { getNovaTvSubscriptionNavItems } from 'utils/links';
import SEO from 'utils/SEO';

interface ISettingsProps {
  subscriptionId: string;
  children: React.ReactNode;
  authentication?: Authentication;
  childSubscriptionId?: string;
}

const Settings = ({
  subscriptionId,
  children,
  childSubscriptionId,
  authentication,
}: ISettingsProps) => {
  if (!authentication) return null;

  const { accountInput } = authentication;
  const { t } = useTranslation('stillingar');
  const router = useRouter();
  const { error, data } = useQuery<IUserData>(SUBSCRIPTION, {
    variables: { subscriptionId, accountInput },
  });

  if (error || !data?.me?.profiles || !data?.me?.profiles[0]) {
    return null;
  }

  const profile = new Profile(data.me.profiles[0]);
  const isFiber = profile.rateplan.typeId === 'fiber';

  const heroSubNav: Array<any> = childSubscriptionId
    ? getNovaTvSubscriptionNavItems({
        subscriptionId,
        ssn: accountInput?.ssn,
        childSubscriptionId,
      })
    : profile?.getHeroSubNavigation(accountInput.ssn, authentication.isStaff);
  const settingsSubNav = heroSubNav.find((i: any) => i.id === 'settings');
  const color = profileColor(profile.rateplan);

  return (
    <Wrapper header="dark">
      <SEO title="Stillingar" />
      <HeroProfile
        subtitleLink="/thjonustur"
        color="dark"
        background="white"
        subscriptionId={subscriptionId}
        childSubscriptionId={childSubscriptionId}
      />
      <ContainerDeprecated row underBar>
        {isFiber ? (
          React.Children.toArray(children).map((c: any) =>
            React.cloneElement(c as React.ReactElement<any>, { color, subscriptionId }),
          )
        ) : (
          <>
            <ToggleItems pull>
              {settingsSubNav?.subLinks.map(({ id, title, href }: any) => (
                <ToggleItem
                  key={id}
                  title={t(title)}
                  href={href}
                  currentLink={router.asPath}
                  color={color || 'dark'}
                />
              ))}
            </ToggleItems>
            <ToggleItemsContainer pull>
              {React.Children.toArray(children).map((c: any) =>
                React.cloneElement(c as React.ReactElement<any>, { color, subscriptionId }),
              )}
            </ToggleItemsContainer>
          </>
        )}
      </ContainerDeprecated>
    </Wrapper>
  );
};

Settings.getInitialProps = ({ query }: any) => {
  return {
    subscriptionId: query.subscriptionId,
    childSubscriptionId: query.childSubscriptionId,
    namespacesRequired: ['stillingar'],
  };
};

export default inject('authentication')(Settings);