import PropTypes from 'prop-types';
import React, { Component } from 'react';

import { Icon } from '../../lib';

import Tooltip from '../components/Tooltip';
import Portal from '../components/Portal';

class TooltipEntity extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showTooltipAt: false,
        };

        this.openTooltip = this.openTooltip.bind(this);
        this.closeTooltip = this.closeTooltip.bind(this);
    }

    openTooltip(e) {
        const trigger = e.target;
        const rect = trigger.getBoundingClientRect();

        this.setState({
            showTooltipAt: rect,
        });
    }

    closeTooltip() {
        this.setState({ showTooltipAt: null });
    }

    render() {
        const {
            entityKey,
            contentState,
            children,
            onEdit,
            onRemove,
            icon,
            label,
        } = this.props;
        const { showTooltipAt } = this.state;
        const { url } = contentState.getEntity(entityKey).getData();

        /* eslint-disable springload/jsx-a11y/interactive-supports-focus */
        return (
            <a
                role="button"
                onMouseUp={this.openTooltip}
                className="TooltipEntity"
            >
                <Icon icon={icon} />
                {children}
                {showTooltipAt && (
                    <Portal
                        onClose={this.closeTooltip}
                        closeOnClick
                        closeOnType
                        closeOnResize
                    >
                        <Tooltip target={showTooltipAt} direction="top">
                            {url ? (
                                <a
                                    href={url}
                                    title={url}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="Tooltip__link"
                                >
                                    {label}
                                </a>
                            ) : null}

                            <button
                                className="Tooltip__button"
                                onClick={onEdit.bind(null, entityKey)}
                            >
                                Edit
                            </button>

                            <button
                                className="Tooltip__button"
                                onClick={onRemove.bind(null, entityKey)}
                            >
                                Remove
                            </button>
                        </Tooltip>
                    </Portal>
                )}
            </a>
        );
    }
}

TooltipEntity.propTypes = {
    entityKey: PropTypes.string.isRequired,
    contentState: PropTypes.object.isRequired,
    children: PropTypes.node.isRequired,
    onEdit: PropTypes.func.isRequired,
    onRemove: PropTypes.func.isRequired,
    icon: PropTypes.oneOfType([
        PropTypes.string.isRequired,
        PropTypes.object.isRequired,
    ]).isRequired,
    label: PropTypes.string.isRequired,
};

export default TooltipEntity;

@@ -338,13 +338,12 @@
 At: 
-false
+null
 ,%0A  
@@ -540,20 +540,38 @@
     
-const rect =
+this.setState(%7B showTooltipAt:
  tri
@@ -602,75 +602,8 @@
 ct()
-;%0A%0A        this.setState(%7B%0A            showTooltipAt: rect,%0A       
  %7D);
@@ -1003,24 +1003,122 @@
 getData();%0A%0A
+        // Contrary to what JSX A11Y says, this should be a button but it shouldn't be focusable.%0A
         /* e
@@ -1734,49 +1734,8 @@
 p%22%3E%0A
-                            %7Burl ? (%0A    
     
@@ -1793,20 +1793,16 @@
         
- 
-   
 href=%7Bur
@@ -1800,28 +1800,24 @@
  href=%7Burl%7D%0A
-    
             
@@ -1880,20 +1880,16 @@
         
-    
 target=%22
@@ -1928,20 +1928,16 @@
         
-   
- 
 rel=%22noo
@@ -1954,20 +1954,16 @@
 ferrer%22%0A
-    
         
@@ -2036,34 +2036,26 @@
             
-    %3E%0A    
+%3E%0A
             
@@ -2114,54 +2114,12 @@
     
- 
-   
 %3C/a%3E
-%0A                            ) : null%7D
 %0A%0A  

Simplify TooltipEntity definition