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

import Step from 'containers/checkout';
import GetReason from 'containers/checkout/steps/GetReason';
import ConfirmSubscriptionCancel from 'containers/checkout/steps/ConfirmSubscriptionCancel';

interface IUppsognProps extends WithTranslation {
  step: string;
  pack: string;
  ssn: string;
  subscriptionId: string;
  namespacesRequired: string[];
}

const COLOR = 'ocean';

class Uppsogn extends React.Component<IUppsognProps> {
  static async getInitialProps({ query }: any) {
    const { step, subscriptionId, pack, ssn } = query;

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

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

    return (
      <Step
        color={COLOR}
        titleSteps={[t('steps.reason.heading'), t('steps.confirmation.heading')]}
        totalSteps={2}
        checkoutLink="uppsogn"
        subscriptionId={subscriptionId}
        returnLink={`/${ssn}/thjonusta/${subscriptionId}/stillingar/thjonustuleid`}
      >
        <GetReason />
        <ConfirmSubscriptionCancel ssn={ssn} />
      </Step>
    );
  }
}

export default withTranslation('cancel')(Uppsogn);