import PropTypes from 'prop-types';
import React from 'react';
import Popup from 'reactjs-popup';
// import Combobox from 'react-widgets/lib/Combobox';
import 'react-widgets/dist/css/react-widgets.css';
import './Popup.css';

/**
 * @file LinkPopup
 * Handling link modal
 * @module LinkPopup
 * @extends React.Component
 */
export default class LinkPopup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      newLinkName: '',
      targetEndpoint: '',
      parameterName: '',
      value: '',
    };
  }

  /**
   * Handle user input
   * @method
   * @param {Event} e - text input event
   */
  handleEndpointLink = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  /**
   * Handle saving new link information
   * @method
   */
  handleSave = () => {
    const { newLinkName, targetEndpoint, parameterName, value } = this.state;
    const { onNewLink } = this.props;
    onNewLink(newLinkName, targetEndpoint, parameterName, value);
  };

  render() {
    const { openModal, handleClose, pathParts } = this.props;
    const { newLinkName, targetEndpoint, parameterName, value } = this.state;

    return (
      <Popup open={openModal} closeOnDocumentClick onClose={handleClose}>
        {(close) => (
          <div className="modal">
            <h3 className="header">
              {' '}
              Add Link From Endpoint
              {` ${pathParts[0].replace(/%2F/gi, '/')}`}
            </h3>
            <div className="content">
              <form>
                <div style={{ float: 'left' }}>
                  <h4>Link Name:</h4>
                  <input
                    type="text"
                    name="newLinkName"
                    value={newLinkName}
                    onChange={this.handleEndpointLink}
                  />
                </div>
                <div style={{ float: 'left' }}>
                  <h4>Target Endpoint</h4>
                  <input
                    type="text"
                    name="targetEndpoint"
                    value={targetEndpoint}
                    onChange={this.handleEndpointLink}
                  />
                </div>
                <div style={{ clear: 'both' }}>
                  <h4>Parameter Name:</h4>
                  <input
                    type="text"
                    name="parameterName"
                    value={parameterName}
                    onChange={this.handleEndpointLink}
                  />
                </div>
                <div style={{ clear: 'both' }}>
                  <h4>Value:</h4>
                  <input
                    type="text"
                    name="value"
                    value={value}
                    onChange={this.handleEndpointLink}
                  />
                </div>
              </form>
            </div>

            <div className="actions">
              <button
                type="button"
                className="btn save-btn"
                onClick={() => {
                  this.handleSave();
                  close();
                }}
              >
                Save
              </button>
            </div>
          </div>
        )}
      </Popup>
    );
  }
}

LinkPopup.propTypes = {
  pathParts: PropTypes.instanceOf(Array).isRequired,
  openModal: PropTypes.bool.isRequired,
  handleClose: PropTypes.func.isRequired,
  onNewLink: PropTypes.func.isRequired,
};