<template>
  <selector
    ref="current"
    v-bind="selectorProps"
    mode="single"
    v-on="$listeners"
    @clear="clearHandler"
    @focus="focusHandler"
    @blur="blurHandler">
    <template slot="placeholder">
      <span class="mm-selector__placeholder">
        {{ placeholder }}
      </span>
    </template>

    <template slot="selection">
      <slot name="selection">
        <span
          v-if="isValidValue && !searchValue"
          :style="singleValueStyle"
          :title="value"
          class="mm-selector-selected-value"
          @click="clickHandler">
          {{ value }}
        </span>

        <span
          v-if="showSearch"
          :style="searchInlineStyle"
          class="mm-selector-search mm-selector-search--inline">
          <search-input
            ref="input"
            :value="searchValue"
            :disabled="disabled"
            :on-change="onSearchChange"
            :on-input="onSearchInput"
            :on-keydown="onSearchKeydown"
            @input="$listeners['update:searchValue']">
          </search-input>
        </span>
      </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 SearchInput from "../search-input"
import { t } from "../../../locale"
import locale from "../../../mixins/locale"

export default {
  name: "mm-selector-single",
  components: {
    Selector,
    SearchInput,
  },
  mixins: [locale],
  inheritAttrs: false,
  props: {
    ...Selector.props,
    placeholder: {
      type: String,
      default: () => t("ui.selector.placeholder"),
    },
    searchValue: {
      type: String,
    },
    filterable: {
      type: Boolean,
    },
    editable: {
      type: Boolean,
    },
    value: {
      type: [Object, Number, String],
    },
  },

  data() {
    return {
      focused: false,
    }
  },
  computed: {
    showSearch() {
      return (this.filterable || this.editable) && (this.visible || this.focused)
    },

    searching() {
      return this.searchValue && this.showSearch
    },

    selectorProps() {
      const props = pick(this.$props, Object.keys(Selector.props))
      return {
        ...props,
        focused: this.focused,
        clearable: props.clearable && (!this.filterable || this.searching) && !this.disabled,
      }
    },
    searchInlineStyle() {
      if (this.showSearch) {
        return {
          opacity: 1,
          cursor: "text",
        }
      } else {
        return {
          opacity: 0,
          cursor: "pointer",
        }
      }
    },
    singleValueStyle() {
      return {
        opacity: this.showSearch ? 0.4 : 1,
      }
    },
    isValidValue() {
      return ![null, undefined].includes(this.value)
    },
  },
  watch: {
    showSearch(value) {
      if (value) {
        if (this.editable) {
          this.$emit("update:searchValue", this.value)
        }
        this.$nextTick(() => {
          this.$refs.input.focus()
        })
      }
    },
  },
  methods: {
    focus() {
      if (this.showSearch) {
        this.$refs.input.focus()
      } else if (this.$refs.current) {
        this.$refs.current.focus()
      }
    },
    blur() {
      if (this.showSearch) {
        this.$refs.input.blur()
      } else if (this.$refs.current) {
        this.$refs.current.blur()
      }
    },
    clearHandler() {
      this.focus()
    },
    focusHandler() {
      this.focused = true
    },
    blurHandler() {
      this.focused = false
    },
    clickHandler() {
    },
  },
}
</script>
