import Vue from 'vue'
import $ from 'jquery'

export default Vue.extend({
  name: 'FtIconButton',
  props: {
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: 'ellipsis-v'
    },
    theme: {
      type: String,
      default: 'base'
    },
    useShadow: {
      type: Boolean,
      default: true
    },
    padding: {
      type: Number,
      default: 10
    },
    size: {
      type: Number,
      default: 20
    },
    forceDropdown: {
      type: Boolean,
      default: false
    },
    dropdownPositionX: {
      type: String,
      default: 'center'
    },
    dropdownPositionY: {
      type: String,
      default: 'bottom'
    },
    dropdownNames: {
      type: Array,
      default: () => { return [] }
    },
    dropdownValues: {
      type: Array,
      default: () => { return [] }
    }
  },
  data: function () {
    return {
      showDropdown: false,
      id: ''
    }
  },
  mounted: function () {
    this.id = `iconButton${this._uid}`
  },
  methods: {
    toggleDropdown: function () {
      $(`#${this.id}`)[0].style.display = 'inline'
      $(`#${this.id}`).focus()

      $(`#${this.id}`).focusout(() => {
        const shareLinks = $(`#${this.id}`).find('.shareLinks')

        if (shareLinks.length > 0) {
          if (!shareLinks[0].parentNode.matches(':hover')) {
            $(`#${this.id}`)[0].style.display = 'none'
          }
        } else {
          $(`#${this.id}`)[0].style.display = 'none'
        }
      })
    },

    focusOut: function () {
      $(`#${this.id}`).focusout()
      $(`#${this.id}`)[0].style.display = 'none'
    },

    handleIconClick: function () {
      if (this.forceDropdown || (this.dropdownNames.length > 0 && this.dropdownValues.length > 0)) {
        this.toggleDropdown()
      } else {
        this.$emit('click')
      }
    },

    handleDropdownClick: function (index) {
      this.$emit('click', this.dropdownValues[index])
      this.focusOut()
    }
  }
})