import PropTypes from '../../_util/vue-types'
import KeyCode from '../../_util/KeyCode'

const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', position: 'absolute' }
export default {
  name: 'Sentinel',
  props: {
    setRef: PropTypes.func,
    prevElement: PropTypes.any,
    nextElement: PropTypes.any,
  },
  methods: {
    onKeyDown ({ target, which, shiftKey }) {
      const { nextElement, prevElement } = this.$props
      if (which !== KeyCode.TAB || document.activeElement !== target) return

      // Tab next
      if (!shiftKey && nextElement) {
        nextElement.focus()
      }

      // Tab prev
      if (shiftKey && prevElement) {
        prevElement.focus()
      }
    },
  },
  render () {
    const { setRef } = this.$props

    return (
      <div
        tabIndex={0}
        {...{ directives: [{
          name: 'ant-ref',
          value: setRef,
        }] }}
        style={sentinelStyle}
        onKeydown={this.onKeyDown}
        role='presentation'
      >{this.$slots.default}</div>
    )
  },
}