import React from 'react';
import {copyToClipboard} from '../../utils/copyToClipboard';
import {getCoordsByDocument} from '../../utils/getCoordsByDocument';

export class TestAutomationPanel extends React.Component {
    state = {
        highlightedStyle: {},
        parentTestIds: [],
        isEnable: false
    };

    componentDidMount() {
        window.TestAutomationPanel = {
            enablePanel: this.enablePanel,
            disablePanel: this.disablePanel
        };
    }

    keyMap = {};

    findUpTestIds(element) {
        const parentTestIds = [];

        while (element && element.tagName) {
            const testId = element.getAttribute('data-test-automation-id');

            if (testId) {
                parentTestIds.push(testId);
            }

            element = element.parentNode;
        }

        return parentTestIds;
    }

    handleKeyDown = e => {
        this.keyMap[e.key] = true;

        if (this.keyMap.Control && this.keyMap.c) {
            copyToClipboard(this.state.parentTestIds.join('.'));
        }
    };

    handleKeyUp = e => {
        if (e.key in this.keyMap) {
            this.keyMap[e.key] = false;
        }
    };

    handleMouseover = e => {
        const highlightedElement = e.target.closest('[data-test-automation-id]');

        if (highlightedElement) {
            this.setState({
                parentTestIds: this.findUpTestIds(highlightedElement).reverse()
            });

            const rect = getCoordsByDocument(highlightedElement);
            const {top, left} = rect;

            this.setState({
                highlightedStyle: {
                    ...this.state.highlightedStyle,
                    height: highlightedElement.offsetHeight,
                    width: highlightedElement.offsetWidth,
                    top,
                    left
                }
            });
        }
    };

    handleClick = e => {
        // eslint-disable-next-line no-console
        console.log('Click on ' + this.state.parentTestIds.join('.'));
    };

    enablePanel = () => {
        document.addEventListener('mouseover', this.handleMouseover);
        document.addEventListener('click', this.handleClick);
        document.body.addEventListener('keydown', this.handleKeyDown);
        document.body.addEventListener('keyup', this.handleKeyUp);

        this.setState({isEnable: true});

        // eslint-disable-next-line no-console
        console.log('You can copy element test ids when it is highlighted (ctrl + c)');
    };

    disablePanel = () => {
        document.removeEventListener('mouseover', this.handleMouseover);
        document.removeEventListener('click', this.handleClick);
        document.body.removeEventListener('keydown', this.handleKeyDown);
        document.body.removeEventListener('keyup', this.handleKeyUp);

        this.setState({isEnable: false});
    };

    render() {
        if (!this.state.isEnable) {
            return null;
        }

        return (
            <div className="test-automation-panel">
                <div className="highlighted" style={this.state.highlightedStyle} />
                <div className="list">{this.state.parentTestIds.join(' -> ')}</div>
            </div>
        );
    }
}
