<template>
  <component
    :is="multiple ? 'multiple-selector' : 'single-selector'"
    ref="selector"
    v-bind="selectorProps"
    v-on="$listeners">
    <template slot="selection">
      <slot name="selection"></slot>
    </template>
    <template slot="suffix-icon">
      <slot name="suffix-icon"></slot>
    </template>
  </component>
</template>
<script>
import MultipleSelector from "./multiple/index"
import SingleSelector from "./single/index"

export default {
  name: "mm-selector",
  components: {
    MultipleSelector,
    SingleSelector,
  },
  inheritAttrs: false,
  props: {
    multiple: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [Array, Object, String, Number],
    },
  },
  computed: {
    selectorProps() {
      let multiple = this.multiple
      let value = this.value

      if (this.multiple) {
        value = Array.isArray(value) ? value : [value]
      } else if (Array.isArray(value)) {
        multiple = true
      }

      return {
        ...this.$props,
        ...this.$attrs,
        multiple,
        value,
      }
    },
  },
  methods: {
    focus() {
      if (this.$refs.selector) {
        this.$refs.selector.focus()
      }
    },
    blur() {
      if (this.$refs.selector) {
        this.$refs.selector.blur()
      }
    },
  },
}
</script>
