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

import HeroProfile from 'containers/hero/HeroProfile';
import Wrapper from 'components/app-layout/Wrapper';

import Report from './containers/report/Report';

import UI from 'store/ui';

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

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

    return {
      subscriptionId,
      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}
        />
        <Report subscriptionId={subscriptionId} date={date} color={ui?.pageColor} />
      </Wrapper>
    );
  }
}