import React from 'react';
import { ContainerDeprecated, Text } from '@nova-hf/ui';
import AbroadUsage from 'beta/pages/thjonustur/[serviceId]/utlond/containers/abroad/AbroadUsage';
import ForeignSummary from 'beta/pages/thjonustur/[serviceId]/utlond/containers/foreignSummary/ForeignSummary';
import { IContext } from 'beta/typings/context';
import { parseMainColor } from 'beta/utils/typeGuards';
import Wrapper from 'components/app-layout/Wrapper';
import HeroProfile from 'containers/hero/HeroProfile';
import { inject, observer } from 'mobx-react';
import UI from 'store/ui';
import SEO from 'utils/SEO';

type UtlondProps = {
  ui?: UI;
  query: any;
  subscriptionId: string;
};

const Utlond = ({ ui, subscriptionId }: UtlondProps) => {
  return (
    <Wrapper header="dark">
      <SEO title={subscriptionId} />
      <HeroProfile
        subtitleLink="/thjonustur"
        color={ui?.pageColor}
        background="white"
        subscriptionId={subscriptionId}
      />
      <ContainerDeprecated underBar spacing>
        <Text variant="h6" renderAs="h2" marginBottom={4}>
          Útlönd
        </Text>
        <AbroadUsage
          color={parseMainColor(ui?.pageColor ?? '', 'pink')}
          subscriptionId={subscriptionId}
        />
        <ForeignSummary
          color={parseMainColor(ui?.pageColor ?? '', 'pink')}
          phoneNumber={subscriptionId}
        />
      </ContainerDeprecated>
    </Wrapper>
  );
};

Utlond.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    subscriptionId: query.subscriptionId,
    namespacesRequired: ['common'],
  };
};

export default inject('ui')(observer(Utlond));