import { nextTick } from 'vue';
import { contextItemValidator } from '../utils';
import GlModal from '../../../../../../base/modal/modal';
import { SafeHtmlDirective } from '../../../../../../../directives/safe_html/safe_html';
import GlSkeletonLoader from '../../../../../../base/skeleton_loader/skeleton_loader';
import { translate } from '../../../../../../../utils/i18n';
import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PREFIX, LANGUAGE_IDENTIFIER_PLAINTEXT } from '../constants';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  name: 'GlDuoChatContextItemDetailsModal',
  components: {
    GlSkeletonLoader,
    GlModal
  },
  directives: {
    SafeHtml: SafeHtmlDirective
  },
  inject: {
    renderGFM: {
      from: 'renderGFM',
      default: () => element => {
        element.classList.add('gl-markdown', 'gl-compact-markdown');
      }
    }
  },
  props: {
    /**
     * Context items to preview. If it has no `content`, the loading state will be displayed.
     */
    contextItem: {
      type: Object,
      required: true,
      validator: contextItemValidator
    }
  },
  computed: {
    isLoadingContent() {
      return this.contextItem.content === undefined;
    },
    languageIdentifierClass() {
      var _this$contextItem$met, _this$contextItem$met2, _this$contextItem$met3;
      if (this.contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
        return LANGUAGE_IDENTIFIER_DIFF;
      }
      const fileExtension = (_this$contextItem$met = this.contextItem.metadata) === null || _this$contextItem$met === void 0 ? void 0 : (_this$contextItem$met2 = _this$contextItem$met.relativePath) === null || _this$contextItem$met2 === void 0 ? void 0 : _this$contextItem$met2.split('.').at(-1);
      if (fileExtension && fileExtension !== ((_this$contextItem$met3 = this.contextItem.metadata) === null || _this$contextItem$met3 === void 0 ? void 0 : _this$contextItem$met3.relativePath)) {
        return `${LANGUAGE_IDENTIFIER_PREFIX}${fileExtension}`;
      }
      return LANGUAGE_IDENTIFIER_PLAINTEXT;
    },
    title() {
      var _this$contextItem$met4, _this$contextItem$met5;
      return ((_this$contextItem$met4 = this.contextItem.metadata) === null || _this$contextItem$met4 === void 0 ? void 0 : _this$contextItem$met4.title) || ((_this$contextItem$met5 = this.contextItem.metadata) === null || _this$contextItem$met5 === void 0 ? void 0 : _this$contextItem$met5.relativePath) || translate('GlDuoChatContextItemDetailsModal.title', 'Preview');
    }
  },
  watch: {
    contextItem: {
      async handler(newVal, oldVal) {
        const shouldFormat = (newVal === null || newVal === void 0 ? void 0 : newVal.content) !== (oldVal === null || oldVal === void 0 ? void 0 : oldVal.content) && (newVal === null || newVal === void 0 ? void 0 : newVal.content);
        if (shouldFormat) {
          await nextTick();
          await this.hydrateContentWithGFM();
        }
      },
      immediate: true
    }
  },
  methods: {
    async hydrateContentWithGFM() {
      await nextTick();
      if (this.$refs.content) {
        this.renderGFM(this.$refs.content);
      }
    },
    onModalVisibilityChange(isVisible) {
      if (!isVisible) {
        this.$emit('close');
      }
    }
  }
};

/* 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('gl-modal',{attrs:{"modal-id":"context-item-details-modal","title":_vm.title,"visible":true,"scrollable":true,"hide-footer":"","size":"lg"},on:{"change":_vm.onModalVisibilityChange}},[(_vm.isLoadingContent)?_c('gl-skeleton-loader'):_c('div',{ref:"content",attrs:{"data-testid":"context-item-content"}},[_c('pre',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.contextItem.content),expression:"contextItem.content"}],staticClass:"code js-syntax-highlight gl-p-3",class:_vm.languageIdentifierClass})])],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__;
