import React from 'react';
import { inject } from 'mobx-react';
import { default as Wrapper } from 'components/app-layout/Wrapper';

import HeroProfile from 'containers/hero/HeroProfile';
import Subscription from './containers/subscription/Subscription';

import Profile from 'store/models/Profile';

import UI from 'store/ui';

interface IThjonustaProps {
  ui?: UI;
  profiles: Profile;
  query: any;
  subscriptionId: string;
  pack: string;
  parentId: string;
}

const Thjonusta = (props: IThjonustaProps) => {
  const { ui, subscriptionId, pack, parentId } = props;

  return (
    <Wrapper>
      <HeroProfile
        subtitleLink={parentId ? `/thjonusta/${parentId}` : '/thjonustur'}
        color={ui?.pageColor || 'pink'}
        background="white"
        subscriptionId={subscriptionId}
        parentId={parentId}
      />
      <Subscription subscriptionId={subscriptionId} pack={pack} parentId={parentId} />
    </Wrapper>
  );
};

Thjonusta.getInitialProps = async ({ query }: IThjonustaProps) => {
  const { subscriptionId, pack, parentId } = await query;

  return {
    subscriptionId,
    pack,
    parentId,
    namespacesRequired: ['common', 'subscription', 'fiber'],
  };
};

export default inject('ui')(Thjonusta);