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 DescriptionPopup
 * Handling add new description modal
 * @module DescriptionPopup
 * @extends React.Component
 */
export default class DescriptionPopup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      description: '',
    };
  }

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

  /**
   * Handle saving new link information
   * @method
   */
  handleSave = () => {
    const { description } = this.state;
    const { onNewDescription } = this.props;
    onNewDescription(description);
  };

  render() {
    const { openModal, handleClose, pathParts } = this.props;
    const { description } = this.state;

    return (
      <Popup open={openModal} closeOnDocumentClick onClose={handleClose}>
        {(close) => (
          <div className="modal">
            <h3 className="header">
              {' '}
              Add Description For
              {` ${pathParts[pathParts.length - 1].replace(/%2F/gi, '/')}`}
            </h3>
            <div className="content">
              <form>
                <div style={{ float: 'left' }}>
                  <h4>Description:</h4>
                  <input
                    type="text"
                    name="description"
                    value={description}
                    onChange={this.handleDescription}
                  />
                </div>
              </form>
            </div>

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