// ==UserScript==
// @name              鼠标取词获取翻译id
// @namespace         https://greasyfork.org/zh-CN/users/323663
// @version           1.0.0
// @description       应用于国际化非标项目，实现鼠标取词获取starling平台上对应的key。
// @author            zhoubingling
// @supportURL        https://code.byted.org/zhoubingling.3365/findid-helper
// @downloadURL none
// ==/UserScript==
(function () {
  var handleContainer = {
    currDom: null,
    createContainer: (text) => {
      var div = document.createElement('div');
      div.setAttribute('style', '' +
        'position:absolute!important;' +
        'font-size:13px!important;' +
        'overflow:auto!important;' +
        'background:#fff!important;' +
        'font-family:sans-serif,Arial!important;' +
        'font-weight:normal!important;' +
        'text-align:left!important;' +
        'color:#000!important;' +
        'padding:0.5em 1em!important;' +
        'line-height:1.5em!important;' +
        'border-radius:5px!important;' +
        'border:1px solid #ccc!important;' +
        'box-shadow:4px 4px 8px #888!important;' +
        'max-width:350px!important;' +
        'max-height:216px!important;' +
        'z-index:2147483647!important;' +
        ''
      );
      div.innerText = text;
      this.currDom = div;
      return div;
    },
    destroyContainer: () => {
      if (this.currDom && this.currDom.parentNode) 
        this.currDom.parentNode.removeChild(this.currDom);
        this.currDom = null;
    }
  };
  function findReact(dom) {
    let key = Object.keys(dom).find(key=>key.startsWith("__reactInternalInstance$"));
    let internalInstance = dom[key];
    if (internalInstance == null) return null;
  
    if (internalInstance.return) { // react 16+
        return internalInstance._debugOwner
            ? internalInstance._debugOwner.stateNode
            : internalInstance.return.stateNode;
    } else { // react <16
        return internalInstance._currentElement._owner._instance;
    }
  }
  document.onmouseout = (e) => {
    if (handleContainer.currDom && handleContainer.currDom == e.target) {
      e.preventDefault();
      return;
    }
    handleContainer.destroyContainer();
  };
  document.onmouseover = (e) => {
    if (handleContainer.currDom && handleContainer.currDom == e.target) {
      e.preventDefault();
      return;
    }
    handleContainer.destroyContainer();
    let obj = findReact(e.target);
    let id = '';
    if (obj && obj.props && obj.props.id) {
      id = obj.props.id;
    } else id = undefined;
    let container = handleContainer.createContainer(id);
    container.style.top = e.pageY + 'px';
    if (e.pageX + 350 <= document.body.clientWidth)// container 面板css最大宽度为250px
      container.style.left = e.pageX + 'px';
    else
      container.style.left = document.body.clientWidth - 350 + 'px';
    
    document.body.appendChild(container);
  }
})();