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

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

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

  applyEntity(src) {
    this.props.applyEntity('IMAGE', 'IMMUTABLE', { src });
    this.setState({ textValue: '' });
    this.toggleExpansion();
  }

  // HANDLERS -----

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

  handleUploadClick() {
    Admin.addImageToBlog((response) => {
      this.applyEntity(response.url);
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    this.applyEntity(this.state.textValue);
  }

  // RENDERING -----

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

  renderMenu() {
    return (
      <div className={ this._collapsedClass('image-input-container') } ref="menu">
        <div className={ this._collapsedClass('options-triangle') }></div>
          <form
            className={ this._collapsedClass('image-form') }
            onSubmit={ this.handleSubmit.bind(this) }
          >
            <p>Input a URL:</p>
            { this.renderTextInput() }
            <p> -or- </p>
          </form>
          { this.renderUploadButton() }
      </div>
    );
  }

  renderTextInput() {
    return (
      <input
        type="text"
        className={ this._collapsedClass('image-input') }
        value={ this.state.textValue || '' }
        onChange={ this.handleTextChange.bind(this) }
        autoFocus={ true }
      />
    );
  }

  renderUploadButton() {
    return (
      <a className="upload-button" onClick={ this.handleUploadClick.bind(this) }>
        Upload Image
      </a>
    );
  }

  // PRIVATE -----

  _collapsedClass(baseName) {
    return baseName + (this.state.isExpanded ? '' : ' collapsed');
  }
}