"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var copyToClipboard_1 = require("../../utils/copyToClipboard");
var getCoordsByDocument_1 = require("../../utils/getCoordsByDocument");
var TestAutomationPanel = /** @class */ (function (_super) {
    __extends(TestAutomationPanel, _super);
    function TestAutomationPanel() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            highlightedStyle: {},
            parentTestIds: [],
            isEnable: false
        };
        _this.keyMap = {};
        _this.handleKeyDown = function (e) {
            _this.keyMap[e.key] = true;
            if (_this.keyMap.Control && _this.keyMap.c) {
                copyToClipboard_1.copyToClipboard(_this.state.parentTestIds.join('.'));
            }
        };
        _this.handleKeyUp = function (e) {
            if (e.key in _this.keyMap) {
                _this.keyMap[e.key] = false;
            }
        };
        _this.handleMouseover = function (e) {
            var highlightedElement = e.target.closest('[data-test-automation-id]');
            if (highlightedElement) {
                _this.setState({
                    parentTestIds: _this.findUpTestIds(highlightedElement).reverse()
                });
                var rect = getCoordsByDocument_1.getCoordsByDocument(highlightedElement);
                var top_1 = rect.top, left = rect.left;
                _this.setState({
                    highlightedStyle: __assign({}, _this.state.highlightedStyle, { height: highlightedElement.offsetHeight, width: highlightedElement.offsetWidth, top: top_1,
                        left: left })
                });
            }
        };
        _this.handleClick = function (e) {
            // eslint-disable-next-line no-console
            console.log('Click on ' + _this.state.parentTestIds.join('.'));
        };
        _this.enablePanel = function () {
            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)');
        };
        _this.disablePanel = function () {
            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 });
        };
        return _this;
    }
    TestAutomationPanel.prototype.componentDidMount = function () {
        window['TestAutomationPanel'] = {
            enablePanel: this.enablePanel,
            disablePanel: this.disablePanel
        };
    };
    TestAutomationPanel.prototype.findUpTestIds = function (element) {
        var parentTestIds = [];
        while (element && element.tagName) {
            var testId = element.getAttribute('data-test-automation-id');
            if (testId) {
                parentTestIds.push(testId);
            }
            element = element.parentNode;
        }
        return parentTestIds;
    };
    TestAutomationPanel.prototype.render = function () {
        if (!this.state.isEnable) {
            return null;
        }
        return (react_1.default.createElement("div", { className: "test-automation-panel" },
            react_1.default.createElement("div", { className: "highlighted", style: this.state.highlightedStyle }),
            react_1.default.createElement("div", { className: "list" }, this.state.parentTestIds.join(' -> '))));
    };
    return TestAutomationPanel;
}(react_1.default.Component));
exports.TestAutomationPanel = TestAutomationPanel;
//# sourceMappingURL=TestAutomationPanel.js.map