var VALID_CLASSNAME = /^[_a-zA-Z\- ]*$/

var constructCssPath = el => {
  if (!(el instanceof Element)) return
  let path = []
  while (el.nodeType === Node.ELEMENT_NODE) {
    let selector = el.nodeName.toLowerCase()
    if (el.id) {
      selector += `#${el.id}`
      path.unshift(selector)
      break
    } else if (el.className && VALID_CLASSNAME.test(el.className)) {
      selector += `.${(el.className.trim()).replace(/\s+/g, '.')}`
    } else {
      let sib = el,
        nth = 1
      while ((sib = sib.previousElementSibling)) {
        if (sib.nodeName.toLowerCase() == selector) nth++
      }
      if (nth != 1) selector += ':nth-of-type(' + nth + ')'
    }
    path.unshift(selector)
    el = el.parentNode
  }
  return path.join(' > ')
}


var defaultProps = {
  root: 'body',
  outlineStyle: '5px solid rgba(204, 146, 62, 0.3)',
  onClick: el => console.log('Element was clicked:', constructCssPath(el))
}

var Inspector = ((props = {}) => {
  const {root, excluded, outlineStyle} = {
    ...defaultProps,
    ...props
  }
  let onClick = props.onClick || defaultProps.onClick

  let selected, excludedElements

  const removeHighlight = el => {
    if (el) el.style.outline = 'none'
  }

  const highlight = el => {
    el.style.outline = outlineStyle
    el.style.outlineOffset = `-${el.style.outlineWidth}`
  }

  const shouldBeExcluded = ev => {
    if (excludedElements && excludedElements.length && excludedElements.some(parent => (parent === ev.target || parent.contains(ev.target)))){
      return true
    }
  }

  const handleMouseOver = ev => {
    if (shouldBeExcluded(ev)){
      return
    }
    selected = ev.target
    highlight(selected)
  }

  const handleMouseOut = ev => {
    if (shouldBeExcluded(ev)){
      return
    }
    removeHighlight(ev.target)
  }

  const handleClick = ev => {
    if (shouldBeExcluded(ev)){
      return
    }
    ev.preventDefault()
    ev.stopPropagation()
    onClick(ev.target)
    return false
  }

  const prepareExcluded = (rootEl) => {
    if (!excluded.length){
      return []
    }
    const excludedNested = excluded.flatMap(element => {
      if (typeof element === 'string' || element instanceof String){
        return Array.from(rootEl.querySelectorAll(element))
      } else if (element instanceof Element){
        return [element]
      } else if (element.length>0 && element[0] instanceof Element){
        return Array.from(element)
      }
    })
    return Array.from(excludedNested).flat()
  }

  const enable = onClickCallback => {
    const rootEl = document.querySelector(root)
    if (!rootEl)
      return

    if (excluded){
      excludedElements = prepareExcluded(rootEl)
    }
    rootEl.addEventListener('mouseover', handleMouseOver, true)
    rootEl.addEventListener('mouseout', handleMouseOut, true)
    rootEl.addEventListener('click', handleClick, true)
    if (onClickCallback){
      onClick = onClickCallback
    }
  }
  const cancel = () => {
    const rootEl = document.querySelector(root)
    if (!rootEl)
      return
    rootEl.removeEventListener('mouseover', handleMouseOver, true)
    rootEl.removeEventListener('mouseout', handleMouseOut, true)
    rootEl.removeEventListener('click', handleClick, true)
    removeHighlight(selected)

  }
  return {
    enable,
    cancel
  }
})

window.classStack = []
window.classNameMap = {}

function processStack(){
  classStack.forEach(element => {
    document.head.removeChild(element);
  });
  classStack.forEach(element => {
    document.head.appendChild(element)
  });
}

function pushToClassMap(classNames){
  if(window.classNameMap[wpdata['object_id']]!=undefined){
    window.classNameMap[wpdata['object_id']].push(classNames)
  }
  else window.classNameMap[wpdata['object_id']] = [classNames]
  console.log(window.classNameMap)
}

var inspector = Inspector({
  onClick:(el)=>{
    console.log(el)
    const styleElement = document.createElement('style');
    var css = "."+Array.from(el.classList).join(".")+"{display:none!important}"
    var classNames = Array.from(el.classList).join(".")
    styleElement.textContent = css;
    pushToClassMap(classNames)
    window.classStack.push(styleElement)
    document.head.appendChild(styleElement)
    window.parent.postMessage("removed")
  }
})

window.inspector = inspector
window.inpectorData = wpdata;
/*! This file is auto-generated */
window.addComment=function(v){var I,C,h,E=v.document,b={commentReplyClass:"comment-reply-link",commentReplyTitleId:"reply-title",cancelReplyId:"cancel-comment-reply-link",commentFormId:"commentform",temporaryFormId:"wp-temp-form-div",parentIdFieldId:"comment_parent",postIdFieldId:"comment_post_ID"},e=v.MutationObserver||v.WebKitMutationObserver||v.MozMutationObserver,r="querySelector"in E&&"addEventListener"in v,n=!!E.documentElement.dataset;function t(){d(),e&&new e(o).observe(E.body,{childList:!0,subtree:!0})}function d(e){if(r&&(I=g(b.cancelReplyId),C=g(b.commentFormId),I)){I.addEventListener("touchstart",l),I.addEventListener("click",l);function t(e){if((e.metaKey||e.ctrlKey)&&13===e.keyCode&&"a"!==E.activeElement.tagName.toLowerCase())return C.removeEventListener("keydown",t),e.preventDefault(),C.submit.click(),!1}C&&C.addEventListener("keydown",t);for(var n,d=function(e){var t=b.commentReplyClass;e&&e.childNodes||(e=E);e=E.getElementsByClassName?e.getElementsByClassName(t):e.querySelectorAll("."+t);return e}(e),o=0,i=d.length;o<i;o++)(n=d[o]).addEventListener("touchstart",a),n.addEventListener("click",a)}}function l(e){var t,n,d=g(b.temporaryFormId);d&&h&&(g(b.parentIdFieldId).value="0",t=d.textContent,d.parentNode.replaceChild(h,d),this.style.display="none",n=(d=(d=g(b.commentReplyTitleId))&&d.firstChild)&&d.nextSibling,d&&d.nodeType===Node.TEXT_NODE&&t&&(n&&"A"===n.nodeName&&n.id!==b.cancelReplyId&&(n.style.display=""),d.textContent=t),e.preventDefault())}function a(e){var t=g(b.commentReplyTitleId),t=t&&t.firstChild.textContent,n=this,d=m(n,"belowelement"),o=m(n,"commentid"),i=m(n,"respondelement"),r=m(n,"postid"),n=m(n,"replyto")||t;d&&o&&i&&r&&!1===v.addComment.moveForm(d,o,i,r,n)&&e.preventDefault()}function o(e){for(var t=e.length;t--;)if(e[t].addedNodes.length)return void d()}function m(e,t){return n?e.dataset[t]:e.getAttribute("data-"+t)}function g(e){return E.getElementById(e)}return r&&"loading"!==E.readyState?t():r&&v.addEventListener("DOMContentLoaded",t,!1),{init:d,moveForm:function(e,t,n,d,o){var i,r,l,a,m,c,s,e=g(e),n=(h=g(n),g(b.parentIdFieldId)),y=g(b.postIdFieldId),p=g(b.commentReplyTitleId),u=(p=p&&p.firstChild)&&p.nextSibling;if(e&&h&&n){void 0===o&&(o=p&&p.textContent),a=h,m=b.temporaryFormId,c=g(m),s=(s=g(b.commentReplyTitleId))?s.firstChild.textContent:"",c||((c=E.createElement("div")).id=m,c.style.display="none",c.textContent=s,a.parentNode.insertBefore(c,a)),d&&y&&(y.value=d),n.value=t,I.style.display="",e.parentNode.insertBefore(h,e.nextSibling),p&&p.nodeType===Node.TEXT_NODE&&(u&&"A"===u.nodeName&&u.id!==b.cancelReplyId&&(u.style.display="none"),p.textContent=o),I.onclick=function(){return!1};try{for(var f=0;f<C.elements.length;f++)if(i=C.elements[f],r=!1,"getComputedStyle"in v?l=v.getComputedStyle(i):E.documentElement.currentStyle&&(l=i.currentStyle),(i.offsetWidth<=0&&i.offsetHeight<=0||"hidden"===l.visibility)&&(r=!0),"hidden"!==i.type&&!i.disabled&&!r){i.focus();break}}catch(e){}return!1}}}}(window);;