<template>
  <v-layout column>
    <v-layout align-center row>
      <v-flex xs12>
        <v-card tile flat color="teal lighten-4" class="pa-2">
          <h5 class="subtitle-1 font-weight-bold">REFERENCE & TIPE</h5>
        </v-card>
      </v-flex>
    </v-layout>

    <v-layout row wrap class="pa-2">
      <v-flex xs12 sm8 class="pr-2">
        <v-autocomplete
          multiple
          chips
          deletable-chips
          clearable
          return-object
          :items="xreference"
          v-model="selected_reference"
          :search-input.sync="search_item_reference"
          item-text="M_ReferenceName"
          item-value="M_ReferenceID"
          no-filter
          label="Reference"
          no-data-text="Pilih Reference"
        >
          <template #item="{ item }">
            <v-list-tile-content>
              <v-list-tile-title>{{ item.M_ReferenceName }}</v-list-tile-title>
            </v-list-tile-content>
          </template>
        </v-autocomplete>
      </v-flex>

      <v-flex xs12 sm4>
        <v-autocomplete
          multiple
          chips
          deletable-chips
          clearable
          return-object
          :items="xordertype"
          v-model="selected_ordertype_multi"
          :search-input.sync="search_item_ordertype"
          item-text="M_OrderTypeName"
          item-value="M_OrderTypeID"
          no-filter
          label="Order Type"
          no-data-text="Pilih Order Type"
          @click:clear="clearOrderType"
          @focus="loadAllOrderType"
          @change="limitOrderType"
        >
          <template #item="{ item }">
            <v-list-tile-content>
              <v-list-tile-title>{{ item.M_OrderTypeName }}</v-list-tile-title>
            </v-list-tile-content>
          </template>
        </v-autocomplete>
      </v-flex>
    </v-layout>
  </v-layout>
</template>

<script>
module.exports = {
  data() {
    return {
      search_item_reference: "",
      search_item_ordertype: "",
      isClearingOrderType: false
    }
  },

  computed: {
    xreference() {
      return this.$store.state.reference.references || []
    },

    xordertype() {
      return this.$store.state.reference.ordertypes || []
    },

    selected_reference: {
      get() {
        const v = this.$store.state.reference.selected_reference
        return Array.isArray(v) ? v : []
      },
      set(val) {
        this.$store.commit(
          "reference/update_selected_reference",
          Array.isArray(val) ? val : []
        )
      }
    },

    selected_ordertype_multi: {
      get() {
        const v = this.$store.state.reference.selected_ordertype
        return v ? [v] : []
      },
      set(val) {
        if (Array.isArray(val) && val.length > 0) {
          this.$store.commit(
            "reference/update_selected_ordertype",
            val[val.length - 1]
          )
        } else {
          this.$store.commit("reference/update_selected_ordertype", null)
        }
      }
    }
  },

  methods: {
    thr_search_reference: _.debounce(function () {
      this.$store.dispatch("reference/searchreference", this.search_item_reference)
    }, 500),

    thr_search_ordertype: _.debounce(function () {
      this.$store.dispatch("reference/searchordertype", this.search_item_ordertype)
    }, 500),

    clearOrderType() {
      this.isClearingOrderType = true
      this.$store.commit("reference/update_selected_ordertype", null)
      this.search_item_ordertype = ""

      this.$nextTick(() => {
        this.isClearingOrderType = false
      })
    },

    loadAllOrderType() {
      if (!this.search_item_ordertype) {
        this.$store.dispatch("reference/searchordertype", "")
      }
    },

    limitOrderType(val) {
      if (Array.isArray(val) && val.length > 1) {
        this.$store.commit(
          "reference/update_selected_ordertype",
          val[val.length - 1]
        )
      }
    }
  },

  watch: {
    search_item_reference(val) {
      if (val === null || val === undefined) return
      this.thr_search_reference()
    },

    search_item_ordertype(val) {
      if (this.isClearingOrderType) return
      if (val === null || val === undefined) return
      if (typeof val !== "string") return
      this.thr_search_ordertype()
    }
  },

  mounted() {
    this.$store.dispatch("reference/searchreference", "")
    this.$store.dispatch("reference/searchordertype", "")
  }
}
</script>