import React from 'react';
import * as R from 'ramda';
import { PortalWithState } from 'react-portal';
import CategoriesTooltip from './CategoriesTooltip';
import { defaultAnnotationsCategories } from '../../constants';

/**
 * Render a category toolbar button.
 *
 * @param {String} type
 * @param {String} icon
 * @return {Element}
 */
export default class CategoryButton extends React.Component {

  constructor(props) {
    super(props);

    this.hoveringMenuRef = React.createRef();
  }

  get hoveringMenu() {
    if(this.hoveringMenuRef) {
      return this.hoveringMenuRef.current;
    }
    return null;
  }

  updateMenu = () => {

    const hoveringMenu = this.hoveringMenu;

    if (!hoveringMenu) return

    const selection = window.getSelection()

    if (selection.isCollapsed) {
      return
    }

    const range = selection.getRangeAt(0)
    const rect = range.getBoundingClientRect()

    hoveringMenu.style.opacity = 1
    hoveringMenu.style.top = `${rect.top + rect.height + window.scrollY + hoveringMenu.offsetHeight}px`
    hoveringMenu.style.left = `${rect.left + window.scrollX - hoveringMenu.offsetWidth / 2 + rect.width / 2}px`
  }

  render = () => {
    const isActive = this.props.isActive;
    const onClickCategoryButton = this.props.onClickCategoryButton;
    const onCategoryClick = this.props.onCategoryClick;
    const annotationCategories = this.props.annotationCategories;

    const markActivation = "button sticky-top" + ((!isActive)?" text-primary":" text-dark");

    return (
      <PortalWithState
        // closeOnOutsideClick
        closeOnEsc
        onOpen={this.updateMenu}
      >
        {({ openPortal, closePortal, isOpen, portal }) => {
          const onMouseDown = R.partial(onClickCategoryButton, [openPortal, closePortal, isOpen]);
          const onCategoryClickHandler = R.partial(onCategoryClick, [closePortal,]);
          return (
            <React.Fragment>
              <span className={markActivation} onMouseDown={onMouseDown} data-active={isActive}>
                <span className="material-icons">label</span>
              </span>
              {portal(
                <div className="hovering-menu" ref={this.hoveringMenuRef}>
                  <CategoriesTooltip categories={annotationCategories || defaultAnnotationsCategories} onCategoryClick={onCategoryClickHandler} />
                </div>
              )}
            </React.Fragment>
          )}
        }
      </PortalWithState>
    )
  }
}