import * as React from 'react';
import { observer, inject } from 'mobx-react';
import { Confirmation, Button, PaymentFooter, Col } from '@nova-hf/ui';
import { withTranslation, WithTranslation } from 'utils/i18n';

import DateSVG from 'assets/svg/date.svg';

interface IEffectTimeProps extends WithTranslation {
  color: string;
  change?: any;
}

class EffectTime extends React.Component<IEffectTimeProps> {
  onSelected = (activateNextMonth: boolean) => {
    const { change } = this.props;

    change.activateNextMonth = activateNextMonth;
    change.checkEffectTime = false;
  };

  render() {
    const {
      t,
      change: { allowChangeNow, selectedRefill },
      color,
    } = this.props;

    if (!allowChangeNow) {
      return (
        <Col col={6} push={3} base={12}>
          <Confirmation
            title={t('steps.effectTime.warningHeading')}
            description={t('steps.effectTime.warningDescription')}
            icon={<DateSVG />}
          />
          <PaymentFooter>
            <Button
              background={color}
              onClick={() => {
                this.onSelected(true);
              }}
            >
              {t('steps.effectTime.proceed')}
            </Button>
          </PaymentFooter>
        </Col>
      );
    }

    return (
      <Col col={6} push={3} base={12}>
        <Confirmation
          title={t('steps.effectTime.heading')}
          description={
            selectedRefill
              ? t('steps.effectTime.refillDescription')
              : t('steps.effectTime.description')
          }
          icon={<DateSVG />}
        />
        <PaymentFooter>
          <Button
            background={color}
            onClick={() => {
              this.onSelected(false);
            }}
          >
            {t('steps.effectTime.now')}
          </Button>
          <Button
            background={color}
            onClick={() => {
              this.onSelected(true);
            }}
          >
            {selectedRefill ? t('steps.effectTime.nextRefill') : t('steps.effectTime.nextMonth')}
          </Button>
        </PaymentFooter>
      </Col>
    );
  }
}
export default withTranslation('change')(inject('change')(observer(EffectTime)));