import React from "react";
import { connect } from "redux-bundler-react";

class QuestionsModal extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: " ",
      lastName: " ",
      Email: " ",
      selIssue: " ",
      addComments: " ",
      errors: {},
    };
    this.close = this.close.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  close() {
    const { doModalClose } = this.props;
    doModalClose();
  }

  handleChange(event) {
    switch (event.target.name) {
      case "FN":
        this.setState({ firstName: event.target.value });
        break;
      case "LN":
        this.setState({ lastName: event.target.value });
        break;
      case "EM":
        this.setState({ Email: event.target.value });
        break;
      case "SI":
        this.setState({ selIssue: event.target.value });
        break;
      case "AC":
        this.setState({ addComments: event.target.value });
        break;
      default:
    }
  }

  handleSubmit(event) {
    event.preventDefault();
    const { doSetContactFormIssues, doHandleFormErrors, doSubmitNotification, errorList } = this.props;
    const formOutputs = {
      first_Name: this.state.firstName,
      last_Name: this.state.lastName,
      e_mail: this.state.Email,
      sel_issue: this.state.selIssue,
      add_comments: this.state.addComments,
    };
    
    const formIsValid = doHandleFormErrors(formOutputs)

    this.setState({
      errors: errorList
    })
    
    if (formIsValid) {
      doSetContactFormIssues(formOutputs);
      doSubmitNotification(formIsValid);
      this.close();

    } else {
      doSubmitNotification(formIsValid);
    }
    
  }
  render() {
    const { theme } = this.props;

    return (
      <div>
        <div className={"cm-modal-header " + theme}>Questions</div>
        <div
          className="cm-modal-body"
          style={{ height: 290, top: 0, bottom: 0, left: 0, right: 0 }}
        >
          <div className="cm-form-group">
            <form onSubmit={this.handleSubmit}>
              <div>
                <label>
                  First Name:{" "}
                  <input
                    name="FN"
                    type="text"
                    value={this.state.firstName}
                    onChange={this.handleChange}
                  ></input>
                  <label style={{color: "red" , position: "relative",  left: 10}}>{this.state.formIsValid ? null: this.state.errors["First_Name"]}</label>
                </label>
                <label style={{position: "relative",  left: 20}}>
                  Last Name:{" "}
                  <input
                    name="LN"
                    type="text"
                    value={this.state.LastName}
                    onChange={this.handleChange}
                  ></input>
                  <label style={{color: "red",  position: "relative",  left: 10}}>{this.state.formIsValid ? null: this.state.errors["Last_Name"]}</label>
                </label>
              </div>
              <br></br>
              <div>
                <label>
                  Email{" "}
                  <input
                    name="EM"
                    style={{ width: 250 }}
                    type="text"
                    value={this.state.Email}
                    onChange={this.handleChange}
                  ></input>
                  <label style={{color: "red",  position: "relative",  left: 10}}>{this.state.formIsValid ? null: this.state.errors["email"]}</label>
                </label>
              </div>
              <br></br>
              <div>
                <label>
                  Select your Current Issue:
                  <select
                    name="SI"
                    style={{ width: 150, textAlign: "center" }}
                    value={this.state.selIssue}
                    onChange={this.handleChange}
                  >
                    <option value=" "> </option>
                    <option value=" Map Issue "> Map Issue </option>
                    <option value=" Errors "> Errors</option>
                    <option value=" Bugs "> Bugs </option>
                    <option value=" Requests "> Requests </option>
                    <option value=" Other"> Other </option>
                  </select>
                  <label style={{color: "red", position: "relative",  left: 10}}>{this.state.formIsValid ? null: this.state.errors["issue"]}</label>
                </label>
              </div>
              <br></br>
              <div>
                <p>Brief Description</p>
                
                <textarea
                  name="AC"
                  style={{ height: 120, width: 300 }}
                  value={this.state.addComments}
                  onChange={this.handleChange}
                ></textarea>
                <label style={{color: "red", position: "relative",  left: 10}}>{this.state.formIsValid ? null: this.state.errors["add_comments"]}</label>
              </div>
            </form>
          </div>
        </div>
        <div className="cm-modal-footer">
          <br></br>
          <br></br>
          <br></br>
          <button
            type="submit"
            className={"cm-btn cm-btn-theme " + theme}
            onClick={this.handleSubmit}
          >
            Submit
          </button>
          <button
            style={{ textAlign: "left" }}
            type="Close"
            className={"cm-btn cm-btn-theme " + theme}
            onClick={this.close}
          >
            Close
          </button>
        </div>
      </div>
      
    );
  }
}

export default connect(
  "selectTheme",
  "doModalClose",
  "doSubmitNotification",
  "doSetContactFormIssues",
  "doHandleFormErrors",
  "selectErrorList",
  QuestionsModal
);