import React from 'react';
import Label from "@/jsx/Controls/Label.jsx";
import Helper from "@/jsx/Controls/Helper.jsx";
import Control from "@/jsx/Controls/Control.jsx";
import {cleanProps} from "@/js/Tools/cleanProps.js";

export default class TextareaControl extends React.Component {

  constructor(props) {
    super(props);
    this.timeout = 1500;
    this.timeoutId = null;
    this.lastChange = null;
    this.state = {
      value: null,
      processing: false,
      disabled: false,
    };
  }

  componentDidMount() {
    const {value, placeholder, processing, errors, activeTab, disabled} = this.props;
    this.setState({
      value: value ?? '',
      placeholder: placeholder ?? '',
      processing: processing ?? false,
      errors: errors ?? {},
      disabled: disabled && activeTab !== 'integration',
    });
  }

  componentDidUpdate(prevProps, prevState, snapshot) {

    // Is the error message changed?
    if (prevProps.errors !== this.props.errors) {
      this.setState({
        errors: this.props.errors
      });
    }

    // Is the value changed?
    if (prevProps.value !== this.props.value) {
      this.setState({
        value: this.props.value ?? ''
      });
    }

    // Is the processing changed?
    if (prevProps.processing !== this.props.processing) {
      this.setState({
        processing: this.props.processing ?? false
      });
    }

  }

  /**
   * Handle the focus event
   */
  handleFocus() {
    this.setState({ placeholder: '' });
  }

  /**
   * Handle the blur event
   */
  handleBlur() {
    const {placeholder} = this.props;
    this.setState({ placeholder: placeholder ?? '' });
  }

  /**
   * Handle the change event
   * @param event
   */
  handleChange(event) {
    const newValue = event.target.value;
    this.setState({ value: newValue });
    this.lastChange = new Date();

    // If the timeout is not reached, do nothing
    const timeoutId = setTimeout(() => {

      // If the timeout is not reached, do nothing
      const currentTime = new Date();
      const timeDiff = currentTime - this.lastChange;
      if (timeDiff < this.timeout) {
        clearTimeout(timeoutId);
        return;
      }

      this.handleSubmit(newValue);
      clearTimeout(timeoutId);

    }, this.timeout);
  }

  /**
   * Reset the value to the default value
   */
  handleReset() {

    const {default_value} = this.props;

    // Set default value in field
    this.setState({
      'value': default_value,
    });

    // Process submit
    setTimeout(() => {
      this.handleSubmit();
    }, 1);

  }

  /**
   * Handle the submitted event
   */
  handleSubmit() {

    this.setState({ errors: {} });

    this.props.handleSubmit({
      'name': this.props.name,
      'value': this.state.value,
    });
  }

  render() {
    const {default_value, name, helper, label} = this.props;
    return (
      <div className="ra-settings-control">
        <Label {...this.props} processing={this.state.processing}>
          {label}
        </Label>
        <div className="ra-control-wrapper type-textarea">
          <Control processing={this.state.processing}>
            <textarea
              {...cleanProps(this.props)}
              id={name}
              autoComplete={name}
              value={this.state.value}
              placeholder={this.state.placeholder}
              onChange={this.handleChange.bind(this)}
              onFocus={this.handleFocus.bind(this)}
              onBlur={this.handleBlur.bind(this)}
              disabled={this.state.processing || this.state.disabled}
            />
          </Control>
          <Helper
            {...this.props}
            showReset={this.state.value !== default_value && !this.state.disabled}
            onReset={this.handleReset.bind(this)}
            processing={this.state.processing}
          >
            {helper}
          </Helper>
        </div>
      </div>
    );

  }

}