import * as React from 'react';
import { inject } from 'mobx-react';
import { withTranslation, WithTranslation } from 'utils/i18n';

import Step from 'containers/checkout';
import ChooseServicePackType from 'containers/checkout/steps/kaupa';
import AddServicePack, { ConfirmChange } from 'containers/checkout/steps';

interface IKaupaProps extends WithTranslation {
  change?: any;
  step: string;
  subscriptionId: string;
  namespacesRequired: string[];
  ssn: string;
}

const COLOR = 'ocean';

@inject('change')
class Kaupa extends React.Component<IKaupaProps> {
  static async getInitialProps({ query }: any) {
    const { step, subscriptionId, ssn } = query;

    return {
      step,
      subscriptionId,
      ssn,
      namespacesRequired: ['common', 'change'],
    };
  }

  render() {
    const { subscriptionId, t, ssn } = this.props;

    return (
      <Step
        color={COLOR}
        titleSteps={[
          t('steps.initial.heading'),
          t('steps.addServicepack.heading'),
          t('steps.confirmation.heading'),
        ]}
        returnLink={subscriptionId && `/${ssn}/thjonusta/${subscriptionId}`}
        checkoutLink="kaupa"
        totalSteps={3}
        subscriptionId={subscriptionId}
      >
        <ChooseServicePackType
          title={t('steps.initial.heading')}
          subtitle={t('steps.initial.description')}
        />
        <AddServicePack />
        <ConfirmChange />
      </Step>
    );
  }
}

export default withTranslation('change')(Kaupa);