import * as React from 'react';
import { inject } from 'mobx-react';

import SEO from 'utils/SEO';

import HeroProfile from 'containers/hero/HeroProfile';
import Summary from 'containers/summary/Summary';

import Wrapper from 'components/app-layout/Wrapper';

import UI from 'store/ui';

interface IThjonustaProps {
  ui?: UI;
  query: any;
  subscriptionId: string;
  date: Date;
}

@inject('ui')
export default class Thjonusta extends React.Component<IThjonustaProps> {
  static async getInitialProps({ query }: IThjonustaProps) {
    const { subscriptionId, date } = await query;

    return {
      subscriptionId,
      date: date ? date : new Date(),
      namespacesRequired: ['common', 'subscription'],
    };
  }

  render() {
    const { subscriptionId, date, ui } = this.props;

    return (
      <Wrapper header="dark">
        <SEO title={subscriptionId} />
        <HeroProfile
          subtitleLink="/thjonustur"
          color={ui?.pageColor}
          background="white"
          subscriptionId={subscriptionId}
        />
        <Summary subscriptionId={subscriptionId} date={date} color={ui?.pageColor} />
      </Wrapper>
    );
  }
}