import React from 'react';
import ToolbarButtons from './ToolbarButtons';
import MarkButton from './MarkButton';
import CategoryButton from './CategoryButton';
import BlockButton from './BlockButton';

/**
 * Define the default node type.
 */

const DEFAULT_NODE = 'paragraph'


/**
 * Render the toolbar.
 *
 * @return {Element}
 */
export default class Toolbar extends React.Component {

  /**
   * Deserialize the initial editor state.
   *
   * @type {Object}
   */
  constructor(props) {
    super(props);
    this.editorRef = React.createRef();
  }

  /**
   * Check if the current selection has a mark with `type` in it.
   *
   * @param {String} type
   * @return {Boolean}
   */

  hasMark = type => {
    const { value } = this.props;
    return value.activeMarks.some(mark => mark.type === type);
  }

  /**
   * Check if the any of the currently selected blocks are of `type`.
   *
   * @param {String} type
   * @return {Boolean}
   */

  hasBlock = type => {
    const { value } = this.props;
    return value.blocks.some(node => node.type === type)
  }


  /**
   * When a mark button is clicked, toggle the current mark.
   *
   * @param {Event} e
   * @param {String} type
   */

  onClickMark = (e, type) => {
    this.props.editor.toggleMark(type)
  }

  isBlockActive = (type) => {
    let isActive = this.hasBlock(type)

    if (['numbered-list', 'bulleted-list'].includes(type)) {
      const { value } = this.props;
      const firstBlock = value.blocks.first();
      if(firstBlock) {
        const parent = value.document.getParent(firstBlock.key);
        isActive = this.hasBlock('list-item') && parent && parent.type === type;
      }
    }

    return isActive;
  }

  onClickCategoryButton = (openPortal, closePortal, isOpen, e) => {
    e.preventDefault();
    const { value, editor } = this.props;

    // Can't use toggleMark here, because it expects the same object
    // @see https://github.com/ianstormtaylor/slate/issues/873
    if (this.hasMark('category')) {
      value.activeMarks.filter(mark => mark.type === 'category')
        .forEach(mark => editor.removeMark(mark));
      closePortal();
    } else {
      openPortal();
    }
  }

  getSelectionParams = (value) => {

    const { selection } = value
    const { start, end} = selection

    if (selection.isCollapsed) {
      return {};
    }

    const nodes = [];
    let hasStarted = false;
    let hasEnded = false;

    // Keep only the relevant nodes,
    // i.e. nodes which are contained within selection
    value.document.nodes.forEach((node) => {
      if (start.isInNode(node)) {
        hasStarted = true;
      }
      if (hasStarted && !hasEnded) {
        nodes.push(node);
      }
      if (end.isAtEndOfNode(node)) {
        hasEnded = true;
      }
    });

    // Concatenate the nodes text
    const text = nodes.map((node) => {
      let textStart = start.isInNode(node) ? start.offset : 0;
      let textEnd = end.isInNode(node) ? end.offset : node.text.length;
      return node.text.substring(textStart,textEnd);
    }).join('\n');

    return {
      currentSelectionText: text,
      currentSelectionStart: start.offset,
      currentSelectionEnd: end.offset
    };
  }

  onCategoryClick = (closePortal, category) => {

    const { value, editor } = this.props;

    const { currentSelectionText, currentSelectionStart, currentSelectionEnd } = this.getSelectionParams(value);

    if(!currentSelectionText) {
      closePortal();
      return;
    }

    const categoryMarks = value.activeMarks.filter(mark => mark.type === 'category')
    categoryMarks.forEach(mark => this.editor.removeMark(mark));

    editor.addMark({
      type: 'category',
      data: {
        text: currentSelectionText,
        selection: {
          start: currentSelectionStart,
          end: currentSelectionEnd,
        },
        color: category.color,
        key: category.key,
        name: category.name,
        comment: category.comment
      }
    })

    closePortal();
  }

    /**
   * When a block button is clicked, toggle the block type.
   *
   * @param {Event} e
   * @param {String} type
   */

  onClickBlock = (e, type) => {
    e.preventDefault();

    const { editor, value } = this.props;

    // Handle everything but list buttons.
    if (type !== 'bulleted-list' && type !== 'numbered-list') {
      const isActive = this.hasBlock(type)
      const isList = this.hasBlock('list-item')

      if (isList) {
        editor
          .setBlocks(isActive ? DEFAULT_NODE : type)
          .unwrapBlock('bulleted-list')
          .unwrapBlock('numbered-list')
      }

      else {
       editor
          .setBlocks(isActive ? DEFAULT_NODE : type)
      }
    }

    // Handle the extra wrapping required for list buttons.
    else {
      const isList = this.hasBlock('list-item')
      const isType = value.blocks.some((block) => {
        return !!document.getClosest(block.key, parent => parent.type === type)
      })

      if (isList && isType) {
       editor
          .setBlocks(DEFAULT_NODE)
          .unwrapBlock('bulleted-list')
          .unwrapBlock('numbered-list')

      } else if (isList) {
        editor
          .unwrapBlock(type === 'bulleted-list' ? 'numbered-list' : 'bulleted-list')
          .wrapBlock(type)

      } else {
        editor
          .setBlocks('list-item')
          .wrapBlock(type)

      }
    }
  }


  render = () => {
    return (
      <div className="menu toolbar-menu d-flex sticky-top bg-secondary">
        <MarkButton icon='format_bold' isActive={this.hasMark('bold')} onMouseDown={(e) => this.onClickMark(e, 'bold')} />
        <MarkButton icon='format_italic' isActive={this.hasMark('italic')} onMouseDown={(e) => this.onClickMark(e, 'italic')} />
        <MarkButton icon='format_underlined' isActive={this.hasMark('underlined')} onMouseDown={(e) => this.onClickMark(e, 'underlined')} />

        <CategoryButton
          isActive={this.hasMark('category')}
          onClickCategoryButton={this.onClickCategoryButton}
          onCategoryClick={this.onCategoryClick}
          annotationCategories={this.props.annotationCategories}
        />

        <BlockButton icon='format_list_numbered' isActive={this.isBlockActive('numbered-list')} onMouseDown={e => this.onClickBlock(e, 'numbered-list')} />
        <BlockButton icon='format_list_bulleted' isActive={this.isBlockActive('bulleted-list')} onMouseDown={e => this.onClickBlock(e, 'bulleted-list')} />

        <ToolbarButtons
          hasNote={!!this.props.note}
          isButtonDisabled={this.props.isButtonDisabled}
          submitNote={this.props.submitNote}
        />

      </div>
    )
  }
}