import React from 'react';
import PropTypes from 'prop-types';
import RRPropTypes from 'react-router-prop-types';
import styles from '../styles.module.css';
import ChoiceContainer from '../../containers/choice';

class ChoiceForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: undefined,
      type: undefined,
    };
  }

  componentDidMount() {
    // get the id from the route params
    const { fetchChoice, match: { params: { id } } } = this.props;
    if (id) fetchChoice(id);
  }

  handleInputChange = (event) => {
    // pull the name of the input and value of input out of the event object
    const { target: { name, value } } = event;
    // update the state to a key of the name of the input and value of the value of the input
    // ex: type: 'incorrect'
    this.setState({
      [name]: value,
    });
  }

  save = async (event) => {
    // don't actually submit the form through the browser
    event.preventDefault();
    const {
      choice: { id }, saveChoice, history, location,
    } = this.props;

    const { value, type = 'correct' } = this.state;
    // get the query params from the url
    const queryParams = new URLSearchParams(location.search);
    // get the quizId from query params
    const questionId = queryParams.get('questionId');
    await saveChoice({
      id, questionId, value, type,
    });
    history.push(`/questions/${questionId}`);
  }

  render() {
    const {
      choice: { id, value: defaultValue = '', type: defaultType = 'correct' },
    } = this.props;
    const {
      value = defaultValue,
      type = defaultType,
    } = this.state;
    return (
      <>
        <h1 className={styles.heading}>{id ? 'Edit Choice' : 'New Choice'}</h1>
        <form method="POST" className={styles.form} onSubmit={this.save}>
          <label className={styles.form__label} htmlFor="value">
            <span>value</span>
            <input
              type="text"
              name="value"
              defaultValue={value}
              className={styles.form__input}
              id="value"
              onChange={this.handleInputChange}
            />
          </label>
          <label className={styles.form__label} htmlFor="correct">
            <span className={styles.form__labelInline}>Is this choice correct?</span>
            <input
              type="radio"
              name="type"
              value="correct"
              checked={type === 'correct'}
              className={styles.form__input__radio}
              id="correct"
              onChange={this.handleInputChange}
            />
            <span>yes</span>
            <label className={styles.form__labelInline} htmlFor="incorrect">
              <input
                type="radio"
                name="type"
                value="incorrect"
                checked={type === 'incorrect'}
                className={styles.form__input__radio}
                id="incorrect"
                onChange={this.handleInputChange}
              />
              <span>no</span>
            </label>
          </label>
          <button type="submit" className={styles.button}>Save</button>
        </form>
      </>
    );
  }
}
ChoiceForm.propTypes = {
  choice: PropTypes.shape({
    id: PropTypes.string,
    value: PropTypes.string,
    type: PropTypes.string,
  }),
  saveChoice: PropTypes.func.isRequired,
  fetchChoice: PropTypes.func.isRequired,
  history: RRPropTypes.history.isRequired,
  location: RRPropTypes.location.isRequired,
  match: RRPropTypes.match.isRequired,
};
ChoiceForm.defaultProps = {
  choice: {},
};
export default ChoiceContainer(ChoiceForm);