<template>
  <selector
    ref="current"
    v-bind="selectorProps"
    mode="multiple"
    v-on="$listeners">
    <template
      v-if="!filterable && realValue.length === 0"
      slot="placeholder">
      <span class="mm-selector__placeholder">
        {{ placeholder }}
      </span>
    </template>

    <template slot="selection">
      <slot name="selection">
        <ul>
          <selection
            v-for="(item, index) of realValue"
            :key="index"
            :raw="item.raw"
            :label="item.label"
            :value="item.value"
            :max-tag-text-length="maxTagTextLength"
            :max-tag-width="maxTagWidth"
            :render-tag="renderTag"
            :closable="closable && !disabled"
            @remove="onSelectionRemove">
          </selection>

          <li
            v-if="maxCount > 0 && maxCount < value.length"
            :title="maxCountText"
            class="mm-selector-choice">
            <div class="mm-selector-choice-content-container">
              <span
                class="mm-selector-choice-content">
                <slot
                  :value="maxTagPlaceholder"
                  name="max-tag-placeholder">
                  {{ maxCountText }}
                </slot>
              </span>
            </div>
          </li>

          <li
            v-if="filterable && (!multipleLimit || realValue.length < multipleLimit)"
            class="mm-selector-search mm-selector-search--inline">
            <search-input
              ref="input"
              :placeholder="realMultiplePlaceholder"
              :value="searchValue"
              :disabled="disabled"
              :on-change="onSearchChange"
              :on-keydown="onSearchKeydown"
              :on-input="onSearchInput"
              need-align
              v-on="searchInputListeners">
            </search-input>
          </li>
        </ul>
      </slot>
    </template>

    <template slot="suffix-icon">
      <slot name="suffix-icon"></slot>
    </template>
  </selector>
</template>

<script>
import pick from "lodash/pick"
import Selector from "../base"
import Selection from "./selection"
import SearchInput from "../search-input"
import { t } from "../../../locale"
import locale from "../../../mixins/locale"

export default {
  name: "mm-selector-multiple",
  components: {
    Selector,
    Selection,
    SearchInput,
  },
  mixins: [locale],
  inheritAttrs: false,
  props: {
    ...Selector.props,
    value: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: String,
      default: () => t("ui.selector.placeholder"),
    },
    disabled: Boolean,
    searchValue: String,
    multiplePlaceholder: {
      type: [Boolean, String],
      default: false,
    },
    maxCount: Number,
    maxTagTextLength: Number,
    maxTagWidth: String,
    multipleLimit: Number,
    onSelectionRemove: {
      type: Function,
      default: () => {},
    },
    renderTag: {
      type: Function,
    },
    closable: {
      type: Boolean,
      default: true,
    },
    filterable: {
      type: Boolean,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    realValue() {
      return this.maxCount > 0 ? this.value.slice(0, this.maxCount) : this.value
    },
    maxTagPlaceholder() {
      return this.value.slice(this.maxCount)
    },
    selectorProps() {
      const props = pick(this.$props, Object.keys(Selector.props))
      return {
        ...props,
        onFocus: this.focusHandler,
      }
    },
    maxCountText() {
      return `+${this.value.length - this.maxCount}...`
    },
    realMultiplePlaceholder() {
      let multiplePlaceholder
      switch (this.multiplePlaceholder) {
        case true:
          multiplePlaceholder = t("ui.selector.multiplePlaceholder")
          break
        case false:
          multiplePlaceholder = ""
          break
        default:
          multiplePlaceholder = this.multiplePlaceholder
      }

      return this.realValue.length > 0 ? multiplePlaceholder : this.placeholder
    },
    searchInputListeners() {
      const listeners = {}
      if (this.$listeners["update:searchValue"]) {
        listeners.input = this.$listeners["update:searchValue"]
      }
      return listeners
    },
  },
  methods: {
    focus() {
      if (this.$refs.input) {
        this.$refs.input.focus()
      } else if (this.$refs.current) {
        this.$refs.current.focus()
      }
    },
    blur() {
      if (this.$refs.input) {
        this.$refs.input.blur()
      } else if (this.$refs.current) {
        this.$refs.current.blur()
      }
    },
    focusHandler(event) {
      this.focus()
      this.onFocus(event)
    },
  },
}
</script>
