import GlDropdownItem from '../../../../../../base/dropdown/dropdown_item';
import GlFormInput from '../../../../../../base/form/form_input/form_input';
import GlAlert from '../../../../../../base/alert/alert';
import { sprintf, translate } from '../../../../../../../utils/i18n';
import { categoryValidator, contextItemsValidator } from '../utils';
import GlDuoChatContextItemMenuSearchItemsLoading from './duo_chat_context_item_menu_search_items_loading';
import GlDuoChatContextItemMenuSearchItem from './duo_chat_context_item_menu_search_item';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  name: 'GlDuoChatContextItemMenuSearchItems',
  components: {
    GlAlert,
    GlDropdownItem,
    GlDuoChatContextItemMenuSearchItem,
    GlDuoChatContextItemMenuSearchItemsLoading,
    GlFormInput
  },
  model: {
    prop: 'searchQuery',
    event: 'update:searchQuery'
  },
  props: {
    activeIndex: {
      type: Number,
      required: true
    },
    searchQuery: {
      type: String,
      required: true
    },
    category: {
      type: Object,
      required: true,
      validator: categoryValidator
    },
    loading: {
      type: Boolean,
      required: true
    },
    error: {
      type: [String, null],
      required: false,
      default: null
    },
    results: {
      type: Array,
      required: true,
      validator: contextItemsValidator
    }
  },
  data() {
    return {
      userInitiatedSearch: false,
      numLoadingItems: 3
    };
  },
  computed: {
    showEmptyState() {
      return Boolean(this.userInitiatedSearch && !this.loading && !this.error && !this.results.length);
    },
    searchInputPlaceholder() {
      return sprintf(translate('GlDuoChatContextItemMenu.searchInputPlaceholder', 'Search %{categoryLabel}...'), {
        categoryLabel: this.category.label.toLowerCase()
      });
    }
  },
  watch: {
    searchQuery() {
      this.userInitiatedSearch = true;
    },
    results(results) {
      this.numLoadingItems = Math.max(1, results.length);
    }
  },
  methods: {
    selectItem(contextItem) {
      this.$emit('select', contextItem);
      this.userInitiatedSearch = false;
    },
    handleKeyUp(e) {
      this.$emit('keyup', e);
    },
    setActiveIndex(index) {
      var _this$results$index;
      if ((_this$results$index = this.results[index]) !== null && _this$results$index !== void 0 && _this$results$index.metadata.enabled) {
        this.$emit('active-index-change', index);
      }
    },
    isActiveItem(contextItem, index) {
      return index === this.activeIndex && contextItem.metadata.enabled;
    }
  },
  i18n: {
    emptyStateMessage: translate('GlDuoChatContextItemMenu.emptyStateMessage', 'No results found')
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-max-h-31 gl-overflow-y-scroll"},[(_vm.loading)?_c('gl-duo-chat-context-item-menu-search-items-loading',{attrs:{"rows":_vm.numLoadingItems}}):(_vm.error)?_c('gl-alert',{staticClass:"gl-m-3",attrs:{"variant":"danger","dismissible":false,"data-testid":"search-results-error"}},[_vm._v("\n      "+_vm._s(_vm.error)+"\n    ")]):(_vm.showEmptyState)?_c('div',{staticClass:"gl-rounded-base gl-p-3 gl-text-center gl-text-secondary",attrs:{"data-testid":"search-results-empty-state"}},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.emptyStateMessage)+"\n    ")]):_c('ul',{staticClass:"gl-mb-1 gl-list-none gl-flex-row gl-pl-0"},_vm._l((_vm.results),function(contextItem,index){return _c('gl-dropdown-item',{key:contextItem.id,staticClass:"duo-chat-context-search-result-item",class:{
          'active-command': _vm.isActiveItem(contextItem, index),
          'gl-cursor-not-allowed [&>button]:focus-within:!gl-shadow-none':
            !contextItem.metadata.enabled,
        },attrs:{"id":("dropdown-item-" + index),"tabindex":!contextItem.metadata.enabled ? -1 : undefined,"data-testid":"search-result-item"},on:{"click":function($event){return _vm.selectItem(contextItem)}}},[_c('div',{on:{"mouseenter":function($event){return _vm.setActiveIndex(index)}}},[_c('gl-duo-chat-context-item-menu-search-item',{class:{ 'gl-text-secondary': !contextItem.metadata.enabled },attrs:{"context-item":contextItem,"category":_vm.category,"data-testid":"search-result-item-details"}})],1)])}),1)],1),_vm._v(" "),_c('gl-form-input',{ref:"contextMenuSearchInput",attrs:{"value":_vm.searchQuery,"placeholder":_vm.searchInputPlaceholder,"autofocus":"","data-testid":"context-menu-search-input"},on:{"input":function($event){return _vm.$emit('update:searchQuery', $event)},"keyup":_vm.handleKeyUp}})],1)};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = __vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export default __vue_component__;
