<template>
  <div
    v-if="!!filteredItems.length"
    :style="{
      top: top + 'px',
      left: left + 'px',
    }"
    class="suggestion-items">
    <v-list
      v-if="filteredItems.length"
      class="suggestion-items__list"
      dense>
      <v-virtual-scroll
        :items="filteredItems"
        max-height="240"
        item-height="44">
        <template v-slot:default="{ item }">
          <v-list-item
            :key="item"
            :ripple="false"
            @click="$emit('input', item)">
            <v-list-item-title>
              {{ item }}
            </v-list-item-title>
          </v-list-item>
        </template>
      </v-virtual-scroll>
    </v-list>
    <div
      v-else
      class="d-flex justify-center align-center grey--text py-5">
      {{ $t('$vuetify.noDataText') }}
    </div>
  </div>
</template>

<script>
import {
  VList,
  VListItem,
  VListItemTitle,
  VVirtualScroll
} from 'vuetify/lib'

export default {
  components: {
    VList,
    VListItem,
    VListItemTitle,
    VVirtualScroll
  },
  props: {
    items: {
      type: Array,
      default: () => ([])
    },
    top: {
      type: [Number],
      default: 0
    },
    left: {
      type: [Number],
      default: 0
    },
    search: {
      type: String,
      default: ''
    },
    callback: {
      type: Function,
      default: undefined
    }
  },
  data () {
    return {
      searchText: '',
      callbackItems: [],
      setSearchDebounce: () => {},
      tryCallbackDebounce: () => {}
    }
  },
  computed: {
    filteredItems () {
      return this.callback ? this.callbackItems : this.$_.search(this.items, this.searchText)
    }
  },
  watch: {
    search (newValue) {
      this.setSearchDebounce(newValue)
      this.tryCallbackDebounce()
    }
  },
  created () {
    this.setSearchDebounce = this.$_.debounce(this.setSearch, 800)
    this.tryCallbackDebounce = this.$_.debounce(this.tryCallback, 850)
  },
  mounted () {
    this.tryCallback()
  },
  methods: {
    setSearch (search = '') {
      this.searchText = search
    },
    tryCallback () {
      if (this.callback) {
        this.callback({ search: this.searchText })
          .then((items) => {
            this.callbackItems = items
          })
      }
    },
    setDialog (dialog = false) {
      this.dialog = dialog
    }
  }
}
</script>

<style lang="scss" scoped>
  .suggestion-items {
    position: fixed;
    background-color: #ffffff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25) !important;
    z-index: 21;
    padding: 8px;
    min-width: 180px;
    &__list {
      &.v-list {
        padding: 0;
        ::v-deep {

          .v-virtual-scroll {
            margin: 0;
          }
          .v-list-item {
            margin-right: 4px;
            margin-bottom: 4px;
            border-radius: 4px;
            &::before {
              border-radius: 4px;
            }
            &:hover::before {
              opacity: 0.1;
            }
            &.v-list-item--link:hover {
              color: var(--v-primary-base) !important;
            }
            .v-list-item__title {
              font-size: 1rem !important;
              font-style: normal;
              font-weight: normal;
              line-height: 24px;
            }
          }
        }
      }
    }
  }

</style>
