import { $, isStr, each, trim } from '../lib/util'

import { pxToNum } from '../lib/fione'

import evalCss from '../lib/evalCss'

  constructor($container) {

    this._style = evalCss(require('./Highlight.scss'))

    this._appendTpl($container)

    this._bindEvent()

    this._$target = $(el)

    this.render()

    this._$el.show()

    evalCss.remove(this._style)

    this._$el.hide()

  }

  render() {

    const { left, width, top, height } = this._$target.offset()

    this._$el.css({ left, top: top - window.scrollY, width, height })

    const computedStyle = getComputedStyle(this._target, '')

    if (computedStyle.display === 'none') {

      return this._$el.css('visibility', 'hidden')

    } else {

      this._$el.css('visibility', 'visible')

    }

    const getNumStyle = (name) => pxToNum(computedStyle.getPropertyValue(name))

    const ml = getNumStyle('margin-left')

    const mr = getNumStyle('margin-right')

    const mt = getNumStyle('margin-top')

    const mb = getNumStyle('margin-bottom')

    const bl = getNumStyle('border-left-width')

    const br = getNumStyle('border-right-width')

    const bt = getNumStyle('border-top-width')

    const bb = getNumStyle('border-bottom-width')

    const pl = getNumStyle('padding-left')

    const pr = getNumStyle('padding-right')

    const pt = getNumStyle('padding-top')

    const pb = getNumStyle('padding-bottom')

    const pw = width - bl - br

    const ph = height - bt - bb

    const marginColor = 'rgba(246, 178, 107, 0.66)'

    const borderColor = 'rgba(255, 229, 153, 0.66)'

    const paddingColor = 'rgba(147, 196, 125, 0.55)'

    const contentColor = 'rgba(111, 168, 220, 0.66)'

    this._$margin.css({

      left: -ml,

      top: -mt,

      width: width + ml + mr,

      height: height + mt + mb,

      borderTop: `${mt}px solid ${marginColor}`,

      borderLeft: `${ml}px solid ${marginColor}`,

      borderRight: `${mr}px solid ${marginColor}`,

      borderBottom: `${mb}px solid ${marginColor}`,

    })

    this._$border.css({

      left: 0,

      top: 0,

      width,

      height,

      borderTop: `${bt}px solid ${borderColor}`,

      borderLeft: `${bl}px solid ${borderColor}`,

      borderRight: `${br}px solid ${borderColor}`,

      borderBottom: `${bb}px solid ${borderColor}`,

    })

    this._$padding.css({

      left: bl,

      top: bt,

      width: pw,

      height: ph,

      borderTop: `${pt}px solid ${paddingColor}`,

      borderLeft: `${pl}px solid ${paddingColor}`,

      borderRight: `${pr}px solid ${paddingColor}`,

      borderBottom: `${pb}px solid ${paddingColor}`,

    })

    this._$content.css({

      left: bl + pl,

      top: bt + pt,

      width: pw - pl - pr,

      height: ph - pt - pb,

      background: contentColor,

    })

    this._$size

      .css({

        top: -mt - (top - mt < 25 ? 0 : 25),

        left: -ml,

      })

      .html(`${formatElName(this._target)} | ${width} × ${height}`)

  }

  _bindEvent() {

    window.addEventListener(

      'scroll',

      () => {

        if (!this._isShow) return

        this.render()

      },

      false

    )

  }

  _appendTpl($container) {

    $container.append(require('./Highlight.hbs')())

    const $el = (this._$el = $container.find('.eruda-elements-highlight'))

    this._$margin = $el.find('.eruda-margin')

    this._$padding = $el.find('.eruda-padding')

    this._$content = $el.find('.eruda-content')

    this._$border = $el.find('.eruda-border')

    this._$size = $el.find('.eruda-size')

  }

}

function formatElName(el) {

  const { id, className } = el

  let ret = `<span style="color:#881280;">${el.tagName.toLowerCase()}</span>`

  if (id !== '') ret += `<span style="color:1a1aa8;">#${id}</span>`

  let classes = ''

  if (isStr(className)) {

    each(className.split(/\s+/g), (val) => {

      if (trim(val) === '') return

      classes += `.${val}`

    })

  ret += `<span style="color:1a1aa8;">${classes}</span>`

  return ret

chobitsu.domain('Network').enable()