import React from "react";

import { Modal } from "patternfly-react";

import { FormattedMessage } from "react-intl";

import PropTypes from "prop-types";

import { connect } from "react-redux";

class EditDescription extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      showModal: false,

    };

    this.open = this.open.bind(this);

    this.close = this.close.bind(this);

  }

  open(e) {

    e.preventDefault();

    e.stopPropagation();

    this.setState({ showModal: true });

  }

  close() {

    this.setState({ showModal: false });

  }

  render() {

    return (

      <>

          {(this.props.descriptionAsLink && this.props.description) || (

            <FormattedMessage defaultMessage="Edit description" />

          )}

        {this.state.showModal && (

            description={this.props.description}

            handleEditDescription={this.props.handleEditDescription}

            close={this.close}

          />

        )}

    );

  }

}

class EditDescriptionModal extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      description: "",

    };

    this.handleChange = this.handleChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

  }

  componentDidMount() {

    this.setState({ description: this.props.description });

  }

  handleChange(e, prop) {

    this.setState({ [prop]: e.target.value });

  }

  handleSubmit(e) {

    this.props.close();

    this.props.handleEditDescription(this.state.description);

    e.preventDefault();

    e.stopPropagation();

  }

  render() {

    return (

      <Modal show onHide={this.props.close} id="cmpsr-modal-edit-description">

        <Modal.Header>

          <Modal.CloseButton onClick={this.props.close} />

          <Modal.Title>

            <FormattedMessage defaultMessage="Edit description" />

          </Modal.Title>

        </Modal.Header>

        <Modal.Body>

          <form className="form-horizontal" data-form="description" onSubmit={this.handleSubmit}>

              <label className="col-sm-3 control-label required-pf" htmlFor="textInput-modal-markup">

                <FormattedMessage defaultMessage="Description" />

              </label>

                  autoFocus

                  type="text"

                  id="textInput-modal-markup"

                  className="form-control"

                  value={this.state.description}

                  onChange={(e) => this.handleChange(e, "description")}

                />

          </form>

        </Modal.Body>

        <Modal.Footer>

          <button type="button" className="btn btn-default" onClick={this.props.close}>

            <FormattedMessage defaultMessage="Cancel" />

          </button>

            id="edit-description-modal-submit-button"

            type="button"

            className="btn btn-primary"

            onClick={this.handleSubmit}

          >

            <FormattedMessage defaultMessage="Save" />

          </button>

        </Modal.Footer>

      </Modal>

    );

  }

}

EditDescription.propTypes = {

  handleEditDescription: PropTypes.func.isRequired,

  description: PropTypes.string,

  descriptionAsLink: PropTypes.bool,

};

EditDescription.defaultProps = {

  description: "",

  descriptionAsLink: false,

};

EditDescriptionModal.propTypes = {

  close: PropTypes.func.isRequired,

  handleEditDescription: PropTypes.func,

  description: PropTypes.string,

};

EditDescriptionModal.defaultProps = {

  handleEditDescription() {},

  description: "",

};

const mapStateToProps = () => ({});

export default connect(mapStateToProps, null)(EditDescription);