import RenderInBody from '../RenderInBody';
import React from 'react';
import HintRoot from '../HintRoot';
import './style.scss';

class TooltipRoot extends HintRoot {
    constructor(props) {
        super(props);
        this.contentOffset = 10;
        this.animationDuration = 100;
        this.show = this.show.bind(this);
        this.close = this.close.bind(this);
        this.updateText = this.updateText.bind(this);

        this.attributeName = 'tooltip';
        this.nodesEvents = {
            paShow: this.show,
            paHide: this.close,
            click: this.show,
        };

        this.state = {
            show: false,
        };
    }

    getPosition() {
        if (!this.state.show) {
            return {};
        }
        const targetBounds = this.state.node.getBoundingClientRect();
        const targetNode = this.element;
        const contentBounds = targetNode && targetNode.getBoundingClientRect();
        const position = {
            top: 'inital',
            left: 'initial',
            bottom: 'initial',
            right: 'initial',
        };

        switch (this.state.node.getAttribute(`${this.attributeName}-position`)) {
            case 'left':
                position.top = targetBounds.top + (targetBounds.height / 2);
                position.left = targetBounds.left - contentBounds.width;
                break;
            case 'top':
                position.top = targetBounds.top - contentBounds.height - this.contentOffset;
                position.left = (targetBounds.left + (targetBounds.width / 2)) - (contentBounds.width / 2);
                break;
            case 'bottom':
                position.top = targetBounds.bottom + this.contentOffset;
                position.left = (targetBounds.left + (targetBounds.width / 2)) - (contentBounds.width / 2);
                break;
            case 'right':
            default:
                position.top = targetBounds.top + (targetBounds.height / 2);
                position.left = (targetBounds.left + targetBounds.width);
        }

        position.top += window.pageYOffset;
        position.left += window.pageXOffset;

        return position;
    }

    updateText(event, nodeElement) {
        if (!this.state.show) {
            return;
        }

        const node = nodeElement || event.currentTarget;

        window.setTimeout(() => {
            this.setState({
                text: node.getAttribute(`${this.attributeName}-text`),
            });
        }, this.animationDuration);
    }

    show(event) {
        const node = event.currentTarget;
        const hasAvailableAttribute = node.getAttribute(`${this.attributeName}-available`);

        if (hasAvailableAttribute && hasAvailableAttribute === 'false') {
            return;
        }

        if (this.element) {
            this.element.classList.remove('closed');
            this.element.classList.add('closed');
        }

        window.setTimeout(() => {
            this.setState({
                node,
                show: true,
                position: node.getAttribute(`${this.attributeName}-position`) || 'right',
                text: node.getAttribute(`${this.attributeName}-text`),
                title: node.getAttribute(`${this.attributeName}-title`),
                primaryButtonText: node.getAttribute(`${this.attributeName}-primary-action-text`),
                secondaryButtonText: node.getAttribute(`${this.attributeName}-secondary-action-text`),
            });

            this.updatePosition();

            if (this.element) {
                this.element.classList.remove('closed');
                this.element.classList.remove('open');
                this.element.classList.add('open');
            }
        }, this.animationDuration);
    }

    close() {
        if (this.element) {
            this.element.classList.remove('open');
            this.element.classList.remove('closed');
            this.element.classList.add('closed');
        }
    }

    render() {
        let primaryButton = null;
        let secondaryButton = null;

        if (this.state.primaryButtonText) {
            primaryButton = (
                <button
                    className="button button_primary"
                    onClick={() => {
                        const ev = document.createEvent('HTMLEvents');
                        ev.initEvent('paPrimaryAction', false, true);
                        this.state.node.dispatchEvent(ev);
                    }}
                >
                    {this.state.primaryButtonText}
                </button>
            );
        }

        if (this.state.secondaryButtonText) {
            secondaryButton = (
                <button
                    className="button button_link"
                    onClick={() => {
                        const ev = document.createEvent('HTMLEvents');
                        ev.initEvent('paSecondaryAction', false, true);
                        this.state.node.dispatchEvent(ev);
                    }}
                >
                    {this.state.secondaryButtonText}
                </button>
            );
        }

        return (
            <RenderInBody>
                <div
                    ref={this.refHandler.bind(this)}
                    className={`Tooltip Tooltip__${this.state.position}`}
                >
                    <div className="Tooltip__content">
                        {this.state.title &&
                        <div className="Tooltip__content__title">{this.state.title}</div>
                        }
                        <div
                            className="Tooltip__content__text"
                            dangerouslySetInnerHTML={{__html: this.state.text}}
                        />
                        {(this.state.primaryButtonText || this.state.secondaryButtonText) &&
                        <div className="Tooltip__buttons">
                            {primaryButton}
                            {secondaryButton}
                        </div>
                        }
                        <button
                            className="Tooltip__close-button"
                            onClick={() => {
                                this.close();
                            }}
                        >
                            ×
                        </button>
                    </div>
                    <div className="Tooltip__pin" />
                </div>
            </RenderInBody>
        );
    }
}

export default TooltipRoot;