text: import React from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  
  import ButtonGroup from '../../../../../../../content/components/ButtonGroup';
  
  import { dNc } from '../../../../../../../content/scripts/custom/utilities';
  
  import * as questionAction from '../../../../../../../content/containers/Fragments/Questions/Components/action';
  
  class SelectQuestionCompanySelectWithRemoteLookupComponent extends React.Component {
    componentDidMount() {
      // wait for document to be ready
      $(() => {
  
      });
    }
  
    componentDidUpdate() {
      const { questionIdentifier, questionID, answer } = this.props;
      const validity = this.validate(this.props.answer);
  
      if (
        validity.valid === false &&
        (validity.show === true || this.props.forceValidate === true) &&
        answer.errorMessage !== validity.error
      ) {
        this.props.reduxAction_doSetQuestionError(
          questionID,
          validity.error,
          questionIdentifier,
        );
      }
  
      // fiddle with the button group to make sure the button is not pressed
      if (answer.optionID === '-1' || answer.optionID === -1) {
        $(this.buttonDOM).addClass('answered');
      }
    }
  
    validate(answer) {
      let error = '';
      let show = false;
      let valid = false;
  
      if (dNc(answer) && dNc(answer.optionID)) {
        valid = true;
      } else {
        error = 'You need to select an option.';
        show = false;
      }
  
      return { valid, error, show };
    }
  
    buttonPress(dataArr) {
      let optionID;
  
      // changing the optionID for on and off clicks, in order to poulate the state with what is in the input.
      if (dataArr.length > 0) {
        optionID = -1;
      } else {
        optionID = -2;
      }
  
      const optionValue = null;
  
      const { questionID, questionIdentifier } = this.props;
      const validity = this.validate({ optionValue, optionID });
  
      this.props.reduxAction_doUpdateQuestionAnswer(
        questionID,
        questionIdentifier,
        optionID,
        optionValue,
        validity.valid,
      );
    }
  
    render() {
      const options = [];
      const value = {
        label: 'Don\'t know',
        value: -1,
      };
  
      let className = 'btn btn-block btn-option btn-multiline btn-margin';
      // turns the button back to grey once the input field has been clicked.
      if (dNc(this.props.answer.optionValue)) className = 'btn btn-block btn-option btn-multiline btn-margin hide-green';
  
      // const answered = false;
  
      const obj = (
        <div key={value.value} >
          <button
          // ref for jQuery to make sure the button has been turned off when clicked on input field.
            ref={(buttonDOM) => { this.buttonDOM = buttonDOM; }}
            value={value.value}
            className={className}
          >
            {value.label}
          </button>
        </div>
      );
  
      options.push(obj);
  
      return (
        <ButtonGroup
          buttons={options}
          callback={(data) => {
            this.buttonPress(data);
          }}
          singleSelect
          clickedClass="answered"
        />
      );
    }
  }
  
  SelectQuestionCompanySelectWithRemoteLookupComponent.propTypes = {
    reduxAction_doUpdateQuestionAnswer: PropTypes.func,
    reduxAction_doSetQuestionError: PropTypes.func,
    questionID: PropTypes.string.isRequired,
    forceValidate: PropTypes.bool.isRequired,
    answer: PropTypes.object.isRequired,
    questionIdentifier: PropTypes.string.isRequired,
    // options: PropTypes.array.isRequired,
    // answerDisplay: PropTypes.any,
  };
  
  SelectQuestionCompanySelectWithRemoteLookupComponent.defaultProps = {
    reduxAction_doUpdateQuestionAnswer: () => {},
    reduxAction_doSetQuestionError: () => {},
    // answerDisplay: null,
  };
  
  const mapStateToProps = null;
  
  const mapDispatchToProps = dispatch => ({
    reduxAction_doUpdateQuestionAnswer: (
      questionID,
      name,
      optionID,
      optionValue,
      valid,
    ) =>
      dispatch(
        questionAction.doUpdateQuestionAnswer(
          questionID,
          name,
          optionID,
          optionValue,
          valid,
        ),
      ),
    reduxAction_doSetQuestionError: (questionID, message, name) =>
      dispatch(questionAction.doSetQuestionError(questionID, message, name)),
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(
    SelectQuestionCompanySelectWithRemoteLookupComponent,
  );
  