import { isBrowser } from '../is-env'
import s from './lightbox.scss'

let lbDiv
const lbDivID = 'owl-ui-lb'
if (isBrowser && !document.getElementById(`${lbDivID}`)) {
  lbDiv = document.createElement('div')
  lbDiv.id = lbDivID

  document.body.appendChild(lbDiv)
}

const LightBox = {
  name: 'LightBox',
  props: {
    width: {
      type: [String, Number],
      default: 700,
    },
    closeOnESC: {
      type: Boolean,
      default: false,
    },
    closeOnClickMask: {
      type: Boolean,
      default: false,
    },
    bgColor: {
      type: String,
      default: 'rgba(255, 255, 255, .8)',
    },
  },

  data() {
    return {
      opened: false,
      libDiv: document.getElementById(`${lbDivID}`),
    }
  },

  watch: {
    opened(bool) {
      if (bool) {
        const { view } = this
        this.libDiv.appendChild(view.$el)
        document.body.style.overflow = 'hidden'
        this.$nextTick(() => {
          view.$el.focus()
        })
      } else {
        this.libDiv.innerHTML = ''
        document.body.style.overflow = 'visible'
      }
    },
  },

  methods: {
    open(ev) {
      if (ev) {
        ev.preventDefault()
      }

      this.opened = true
      this.$emit('open')
    },

    close(ev) {
      if (ev) {
        ev.preventDefault()
      }

      this.opened = false
      this.$emit('close')
    },
  },

  computed: {
    view() {
      return this.$children.find((vm) => vm.$el.getAttribute('data-role') === 'lb-view')
    },
  },

  render(h) {
    const { $slots } = this
    return (
      <div class={[s.lbWrap]}>
        { $slots.default }
      </div>
    )
  },
}

LightBox.Close = {
  name: 'LightBoxClose',
  props: {
    event: {
      type: String,
      default: 'click',
    },
  },

  render(h) {
    const { $slots, event, $parent } = this

    const opts = {
      on: {
        [event]: $parent.$parent.close,
      },
    }
    return (
      <div {...opts} data-role="lb-close" class={[s.close]}>
        {$slots.default}
      </div>
    )
  },
}

LightBox.Open = {
  name: 'LightBoxOpen',
  props: {
    event: {
      type: String,
      default: 'click',
    },
  },

  render(h) {
    const { $slots, event } = this
    const opts = {
      on: {
        [event]: this.$parent.open,
      },
    }
    return (
      <div {...opts} data-role="lb-open" class={[s.open]}>
        {$slots.default}
      </div>
    )
  },
}

LightBox.View = {
  name: 'LightBoxView',
  props: {},

  computed: {
    viewStyle() {
      let { width } = this.$parent

      if (!isNaN(+width)) {
        width = `${width}px`
      }
      return {
        width,
      }
    },

    style() {
      const { bgColor, opened } = this.$parent

      return {
        backgroundColor: bgColor,
        display: opened ? 'block' : 'none',
      }
    },
  },

  render(h) {
    const { $slots, viewStyle, style } = this
    const { closeOnESC, closeOnClickMask, close } = this.$parent

    const on = {}

    if (closeOnClickMask) {
      on.click = close
    }

    if (closeOnESC) {
      on.keydown = (ev) => {
        if (ev.keyCode !== 27) {
          return
        }

        close(ev)
      }
    }

    return (
      <div data-role="lb-view" class={[s.lb]} tabindex="-1" style={style} {...{ on }}>
        <div class={[s.view]} on-click={(ev) => ev.stopPropagation()} style={viewStyle}>
          <span class={[s.x]} on-click={close} />
          {$slots.default}
        </div>
      </div>
    )
  },
}

module.exports = LightBox

@@ -599,32 +599,189 @@
 5, .8)',%0A    %7D,%0A
+    closeHook: %7B%0A      type: %5BBoolean, Function%5D,%0A      default: false,%0A    %7D,%0A    openHook: %7B%0A      type: %5BBoolean, Function%5D,%0A      default: false,%0A    %7D,%0A
   %7D,%0A%0A  data() %7B
@@ -1127,100 +1127,315 @@
     
-%7D else %7B%0A        this.libDiv.innerHTML = ''%0A        document.body.style.overflow = 'visible'
+  if (this.openHook && typeof (this.openHook) === 'function') %7B%0A          this.openHook()%0A        %7D%0A      %7D else %7B%0A        this.libDiv.innerHTML = ''%0A        document.body.style.overflow = 'visible'%0A        if (this.closeHook && typeof (this.closeHook) === 'function') %7B%0A          this.closeHook()%0A        %7D
 %0A   

support callback when open / close light-box