import React from 'react';
import _DropdownMenu from '../toolbar/_dropdown-menu';
import { getStyleIcon } from '../util/icon-util';


export default class LinkButton extends _DropdownMenu {
  constructor(props) {
    super(props)
  }

  specificState() {
    return { textValue: '' };
  }

  // HANDLERS -----

  handleClickInside() {
    const { isApplied, removeEntity, applyPseudoSelection } = this.props;
    if (isApplied) {
      removeEntity();
    } else {
      applyPseudoSelection();
    }
  }

  handleTextChange(e) {
    e.preventDefault();
    this.setState({ textValue: e.currentTarget.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.applyEntity('LINK', 'MUTABLE', { url: this.state.textValue });
    this.setState({ textValue: '' });
    this.toggleExpansion();
  }

  // RENDERING -----

  render() {
    const { isExpanded } = this.state;
    const buttonProps = {
      ref: 'button',
      className: (
        'style-button menu-button image-icon '
        + (this.props.isApplied || isExpanded ? ' pressed' : '')
      ),
      onMouseDown: this.handleMouseDown,
    };
    return (
      <div className="style-button-options-menu-container">
        <div { ...buttonProps }>{ this.renderIcon() }</div>
        { this.renderMenu() }
      </div>
    );
  }

  renderIcon() {
    const { isApplied } = this.props;
    const { isExpanded } = this.state;
    let styleCode = isApplied ? 'unlink' : 'link';
    return getStyleIcon(styleCode, isApplied || isExpanded);
  }

  renderMenu() {
    const { isExpanded } = this.state;
    return (
      <div className={ 'link-input-container' + (isExpanded ? '' : ' collapsed') } ref="menu">
        <div className={ 'options-triangle' + (isExpanded ? '' : ' collapsed') }></div>
          <form
            onSubmit={ this.handleSubmit.bind(this) }
            className={ 'link-form' + (isExpanded ? '' : ' collapsed') }
          >
            <p>URL:</p>
            <input
              type="text"
              className={ 'link-input' + (isExpanded ? '' : ' collapsed') }
              value={ this.state.textValue || '' }
              onChange={ this.handleTextChange.bind(this) }
              autoFocus
            />
          </form>
      </div>
    );
  }
}