import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { RichUtils, Entity } from 'draft-js';
import classNames from 'classnames';
import CheckBox from '../../CheckBox/index';

import './rich-text-link-button.scss';

class LinkButton extends Component {

  constructor(props) {
    super(props);
    this.state = {
      editorState: props.editorState,
      linkValue: '',
      showLinkInput: false,
      isTargetBlank: true
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.editorState && nextProps.editorState !== this.props.editorState) {
      this.setState({ editorState: nextProps.editorState });
    }
  }

  onToggle = () => {
    const { editorState, showLinkInput } = this.state;
    const selection = editorState.getSelection();
    if (!selection.isCollapsed() && showLinkInput === false) {
      this.setState({
        showLinkInput: true,
        linkValue: ''
      }, () => {
        setTimeout(() => this.linkInput.focus(), 0);
      });
    }
  };

  onLinkChange = e => {
    this.setState({ linkValue: e.target.value });
  };

  onConfirmLink = e => {
    if (e) e.preventDefault();
    const { editorState, linkValue, isTargetBlank } = this.state;
    let attributes = { url: linkValue };
    if (isTargetBlank) {
      attributes = { ...attributes, target: '_blank' };
    }
    const entityKey = Entity.create('LINK', 'MUTABLE', attributes);
    this.props.onChange(RichUtils.toggleLink(
      editorState,
      editorState.getSelection(),
      entityKey
    ));
    this.setState({
      showLinkInput: false,
      linkValue: ''
    });
  };

  onRemoveLink = e => {
    if (e) e.preventDefault();
    const { editorState } = this.state;
    const selection = editorState.getSelection();
    if (!selection.isCollapsed()) {
      this.props.onChange(RichUtils.toggleLink(
        editorState,
        selection,
        null
      ));
      this.setState({
        showLinkInput: false
      });
    }
  };

  onLinkTargetChange = isTargetBlank => {
    this.setState({ isTargetBlank: !!isTargetBlank });
  };

  onLinkInputKeyDown = e => {
    if (e.which === 13) {
      this.onConfirmLink();
    }
  };

  render() {
    const { label, className, active } = this.props;
    const { isTargetBlank, showLinkInput, linkValue } = this.state;
    return (
      <div className={className} styleName="wrapper-controls">
        <button
          type="button"
          styleName={classNames(
            'button', { 'button--active': active || showLinkInput }
          )}
          onMouseDown={this.onToggle}
        >
          {label}
        </button>
        {showLinkInput && <span styleName="link-input">
          <input
            styleName="input-link"
            type="url"
            ref={ref => { this.linkInput = ref; }}
            value={linkValue}
            onChange={this.onLinkChange}
            onKeyDown={this.onLinkInputKeyDown}
            placeholder="http://example.com"
          />
          <CheckBox
            styleName="input-target"
            value={isTargetBlank}
            onChange={this.onLinkTargetChange}
          >
            Target blank
          </CheckBox>
          <button type="button" onClick={this.onConfirmLink}>OK</button>
          <button type="button" onClick={this.onRemoveLink}>Remove</button>
        </span>}
      </div>
    );
  }
}
LinkButton.propTypes = {
  active: PropTypes.bool,
  label: PropTypes.node,
  onChange: PropTypes.func,
  className: PropTypes.string,
  editorState: PropTypes.object
};

LinkButton.defaultProps = {
  active: false,
  label: null,
  style: null,
  onToggle: null,
  onChange: null,
  className: null,
  editorState: null
};
export default LinkButton;
