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

import Settings from '../../../containers/settings/Settings';
import Payment from '../../../containers/payment/Payment';

interface IGreidslumatiProps {
  subscriptionId: string;
  ui?: any;
  childSubscriptionId: string;
}

const Greidslumati = ({ subscriptionId, childSubscriptionId, ui: { pageColor } }: IGreidslumatiProps) => {
  return (
    <Settings childSubscriptionId={childSubscriptionId} subscriptionId={subscriptionId}>
      <Payment color={pageColor} subId={childSubscriptionId} />
    </Settings>
  );
};

Greidslumati.getInitialProps = async ({ query }: any) => {
  const { subscriptionId, childSubscriptionId } = query;

  return {
    subscriptionId,
    childSubscriptionId,
    namespacesRequired: ['stillingar'],
  };
};

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