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

import Step from 'containers/checkout';
import { AddConnection, ConfirmConnection } from 'containers/checkout/steps';

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

const COLOR = 'ocean';

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

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

  get types() {
    const { pack } = this.props;

    switch (pack) {
      case 'internet':
        return ['internet', 'fiber'];

      case 'backup':
        return ['backup'];

      case 'forwarding':
        return ['forwarding'];

      default:
        return ['mobile', 'internet'];
    }
  }

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

    return (
      <Step
        color={COLOR}
        titleSteps={[
          t(`steps.connection.addConnection.${pack}.heading`),
          t(`steps.connection.confirmConnection.${pack}.heading`),
        ]}
        totalSteps={2}
        checkoutLink="tengja"
        subscriptionId={subscriptionId}
        returnLink={`/${ssn}/thjonusta/${subscriptionId}`}
      >
        <AddConnection types={this.types[0] === 'backup' ? ['internet'] : this.types} />
        <ConfirmConnection types={this.types} />
      </Step>
    );
  }
}

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