import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer, inject } from 'mobx-react';
import classnames from 'classnames';
import { InputField, InfoBlock, ScrollToHere } from 'shared/modules/Useful';
import { ButtonCaption, Button } from 'Gizmo/UI/Buttons';

const TEXT = {
  title: 'Активировать сертификат',
  certNumberLabel: 'Код сертификата',
  buttonLabel: 'Применить',
  successMessage: 'Сертификат успешно применён',
};

@inject('userStore')
@observer
export class CertificateActivationForm extends Component {
  static propTypes = {
    userStore: PropTypes.object,
    className: PropTypes.string,
  };
  state = {
    code: this.props.userStore.certificateCode || '',
  };
  componentWillUnmount() {
    const { userStore: { dropCertificateState } } = this.props;
    dropCertificateState();
  }
  handleCodeChange = ({ target: { value } }) => {
    const { userStore: { dropCertificateState } } = this.props;
    this.setState({
      code: value,
    });
    dropCertificateState();
  }
  handleActivation = (e) => {
    e.preventDefault();
    const { userStore: { activateCertificate } } = this.props;
    const { code } = this.state;
    code && activateCertificate(code);
  }
  render() {
    const {
      userStore: {
        certificateActivationError,
        certificatePending,
        certificateActivationSuccess,
        certificateCode,
      },
      className,
    } = this.props;
    const { code } = this.state;
    return (
      <form
        className={classnames('cert-activation-form', className)}
        data-test="cert-activation-form-component"
        onSubmit={this.handleActivation}
      >
        {certificateCode && <ScrollToHere />}
        <h4 className="cert-activation-form__title">{TEXT.title}</h4>
        <div className="cert-activation-form__field-wrp">
          <InputField
            wrapperProps={{ className: 'cert-activation-form__field-grp' }}
            className="cert-activation-form__field"
            label={TEXT.certNumberLabel}
            value={code}
            onChange={this.handleCodeChange}
            autoFocus={Boolean(certificateCode)}
          />
        </div>
        <div className="cert-activation-form__actions">
          <Button
            className="gizmo-btn_common gizmo-btn_accent"
            data-test="cert-activation-form-button"
            type="submit"
            disabled={!code}
            inProgress={certificatePending}
          >
            <ButtonCaption>{TEXT.buttonLabel}</ButtonCaption>
          </Button>
        </div>
        {certificateActivationSuccess &&
          <span
            className="cert-activation-form__success-msg"
            data-test="cert-activation-form-success"
          >
            {TEXT.successMessage}
          </span>
        }
        {certificateActivationError &&
          <InfoBlock
            className="cert-activation-form__error"
            data-test="cert-activation-form-error"
          >
            {certificateActivationError}
          </InfoBlock>
        }
      </form>
    );
  }
}