import uniqueId from 'lodash/uniqueId';
import GlIcon from '../../../../../../base/icon/icon';
import GlToken from '../../../../../../base/token/token';
import GlTruncate from '../../../../../../utilities/truncate/truncate';
import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover';
import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE } from '../constants';
import GlDuoChatContextItemDetailsModal from '../duo_chat_context_item_details_modal/duo_chat_context_item_details_modal';
import { contextItemsValidator, getContextItemIcon } from '../utils';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  name: 'GlDuoChatContextItemSelections',
  components: {
    GlTruncate,
    GlDuoChatContextItemDetailsModal,
    GlIcon,
    GlDuoChatContextItemPopover,
    GlToken
  },
  props: {
    /**
     * Array of selected context items.
     */
    selections: {
      type: Array,
      required: true,
      validator: contextItemsValidator
    },
    /**
     * The title to display for the selections.
     */
    title: {
      type: String,
      required: true
    },
    /**
     * Whether the selections should be collapsed by default.
     */
    defaultCollapsed: {
      type: Boolean,
      required: true
    },
    /**
     * Whether the selections can be removed.
     */
    removable: {
      type: Boolean,
      required: false,
      default: false
    },
    variant: {
      type: String,
      required: false,
      default: 'assistant'
    }
  },
  data() {
    return {
      isCollapsed: this.defaultCollapsed,
      selectionsId: uniqueId(),
      previewContextItemId: null
    };
  },
  computed: {
    collapseIconName() {
      return this.isCollapsed ? 'chevron-right' : 'chevron-down';
    },
    variantClasses() {
      if (this.variant === 'user') {
        return 'gl-mb-0 gl-mt-2 gl-text-blue-700';
      }
      return 'gl-mb-2 gl-text-gray-500';
    },
    tokenVariantClasses() {
      if (this.variant === 'user') {
        return 'gl-bg-blue-50 gl-text-blue-600';
      }
      return '';
    },
    contextItemPreview() {
      return this.selections.find(item => item.id === this.previewContextItemId);
    }
  },
  methods: {
    getContextItemIcon,
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },
    onRemoveItem(contextItem) {
      /**
       * Emitted when a context contextItem should be removed.
       * @property {Object} item - The context contextItem to be removed
       */
      this.$emit('remove', contextItem);
    },
    onOpenItem(event, contextItem) {
      const isKeypressOnCloseButton = event.type === 'keydown' && event.target !== event.currentTarget;
      if (isKeypressOnCloseButton) {
        // don't respond to events triggered by the gl-token children (e.g. the close button)
        return;
      }
      if (!this.canOpen(contextItem)) {
        return;
      }
      if (!contextItem.content) {
        this.$emit('get-content', contextItem);
      }
      this.previewContextItemId = contextItem.id;
    },
    canOpen(contextItem) {
      return [CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE].includes(contextItem.category);
    },
    onClosePreview() {
      this.previewContextItemId = null;
    }
  }
};

/* 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',{staticClass:"gl-flex gl-flex-col",class:_vm.variantClasses},[_c('button',{staticClass:"gl-flex gl-w-full gl-items-center gl-border-0 gl-bg-transparent gl-p-0 gl-text-left gl-text-xs gl-lowercase gl-text-inherit",attrs:{"data-testid":"chat-context-selections-title","type":"button"},on:{"click":_vm.toggleCollapse}},[_c('gl-icon',{attrs:{"name":_vm.collapseIconName,"data-testid":"chat-context-collapse-icon"}}),_vm._v(" "+_vm._s(_vm.title)+"\n  ")],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isCollapsed),expression:"!isCollapsed"}],staticClass:"gl-mt-1 gl-flex gl-grow gl-flex-wrap",attrs:{"data-testid":"chat-context-tokens-wrapper"}},_vm._l((_vm.selections),function(item){return _c('gl-token',{key:item.id,staticClass:"gl-mb-2 gl-mr-2 gl-max-w-full",class:_vm.tokenVariantClasses,attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"view-only":!_vm.removable,"variant":"default","tabindex":_vm.canOpen(item) ? 0 : -1,"role":_vm.canOpen(item) ? 'button' : undefined},on:{"click":function($event){return _vm.onOpenItem($event, item)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onOpenItem($event, item)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }$event.preventDefault();return _vm.onOpenItem($event, item)}],"close":function($event){return _vm.onRemoveItem(item)}}},[_c('div',{staticClass:"gl-flex gl-min-w-0 gl-items-center",attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId)}},[(_vm.getContextItemIcon(item))?_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":_vm.getContextItemIcon(item),"size":12}}):_vm._e(),_vm._v(" "),_c('gl-truncate',{attrs:{"text":item.metadata.title,"position":"middle"}})],1),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"context-item":item,"target":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"placement":"bottom"},on:{"show-git-diff":function($event){return _vm.onOpenItem(item)}}})],1)}),1),_vm._v(" "),(_vm.contextItemPreview)?_c('gl-duo-chat-context-item-details-modal',{attrs:{"context-item":_vm.contextItemPreview},on:{"close":_vm.onClosePreview}}):_vm._e()],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__;
