import React from 'react';
import clsx from 'clsx';
import { CaptchaID } from 'app/services/captcha';
import { Skin } from 'app/components/ui';
import captcha from 'app/services/captcha';
import logger from 'app/services/logger';
import { ComponentLoader } from 'app/components/ui/loader';

import styles from './form.scss';
import FormInputComponent from './FormInputComponent';

export default class Captcha extends FormInputComponent<
  {
    delay: number;
    skin: Skin;
  },
  {
    code: string;
  }
> {
  elRef = React.createRef<HTMLDivElement>();
  captchaId: CaptchaID;

  static defaultProps = {
    skin: 'dark',
    delay: 0,
  };

  componentDidMount() {
    setTimeout(() => {
      const { current: el } = this.elRef;

      el &&
        captcha
          .render(el, {
            skin: this.props.skin,
            onSetCode: this.setCode,
          })
          .then(captchaId => {
            this.captchaId = captchaId;
          })
          .catch(error => {
            logger.error('Failed rendering captcha', {
              error,
            });
          });
    }, this.props.delay);
  }

  render() {
    const { skin } = this.props;

    return (
      <div className={styles.captchaContainer}>
        <div className={styles.captchaLoader}>
          <ComponentLoader />
        </div>

        <div
          ref={this.elRef}
          className={clsx(styles.captcha, styles[`${skin}Captcha`])}
        />

        {this.renderError()}
      </div>
    );
  }

  reset() {
    captcha.reset(this.captchaId);
  }

  getValue() {
    return this.state && this.state.code;
  }

  onFormInvalid() {
    this.reset();
  }

  setCode = (code: string) => this.setState({ code });
}