import { translate } from '../../../../../../utils/i18n';
import GlSprintf from '../../../../../utilities/sprintf/sprintf';
import GlAnimatedLoaderIcon from '../../../../../base/animated_icon/animated_loader_icon';
import { LOADING_TRANSITION_DURATION } from '../../constants';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

/**
 * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
 *
 * Please use the corresponding component in Duo-UI going forward.
 * All future development and maintenance for Duo components should take place in Duo-UI.
 *
 * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
 */
const i18n = {
  LOADER_LOADING_MESSAGE: translate('GlDuoChatLoader.loaderLoadingMessage', '%{tool} is %{transition} an answer'),
  LOADER_LOADING_TRANSITIONS: [translate('GlDuoChatLoader.loaderLoadingTransitionsFinding', 'finding'), translate('GlDuoChatLoader.loaderLoadingTransitionsWorkingOn', 'working on'), translate('GlDuoChatLoader.loaderLoadingTransitionsGenerating', 'generating'), translate('GlDuoChatLoader.loaderLoadingTransitionsProducing', 'producing')],
  GITLAB_DUO: translate('GlDuoChatLoader.gitlabDuo', 'GitLab Duo')
};
var script = {
  name: 'GlDuoChatLoader',
  components: {
    GlSprintf,
    GlAnimatedLoaderIcon
  },
  i18n,
  props: {
    /**
     * The message containing the name of the current AI tool working on the answer.
     */
    toolName: {
      type: String,
      required: false,
      default: i18n.GITLAB_DUO
    }
  },
  data() {
    return {
      loadingSequence: 0,
      timeout: null
    };
  },
  beforeDestroy() {
    clearTimeout(this.timeout);
  },
  mounted() {
    this.computeTransitionWidth();
    this.enter();
  },
  methods: {
    computeTransitionWidth() {
      const container = this.$refs.transition;
      const active = this.$refs.currentTransition[0]; // There's only one `currentTransition` ref at a time, but refs in v-for loops are always Arrays
      const {
        width,
        height
      } = active.getBoundingClientRect();
      container.$el.style.width = `${width}px`;
      container.$el.style.height = `${height}px`;
    },
    enter() {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.loadingSequence = (this.loadingSequence + 1) % this.$options.i18n.LOADER_LOADING_TRANSITIONS.length;
        this.enter();
      }, LOADING_TRANSITION_DURATION);
    },
    isCurrentTransition(index) {
      return index === this.loadingSequence;
    }
  }
};

/* 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:"duo-chat-loader gl-mt-5 gl-flex gl-items-center gl-gap-3"},[_c('gl-animated-loader-icon',{attrs:{"is-on":true}}),_vm._v(" "),_c('div',[_c('gl-sprintf',{attrs:{"message":_vm.$options.i18n.LOADER_LOADING_MESSAGE},scopedSlots:_vm._u([{key:"tool",fn:function(){return [_c('strong',{attrs:{"data-testid":"tool"}},[_vm._v(_vm._s(_vm.toolName))])]},proxy:true},{key:"transition",fn:function(){return [_c('transition-group',{ref:"transition",staticClass:"transition gl-relative gl-inline-block gl-align-bottom",attrs:{"name":"text"},on:{"after-leave":_vm.computeTransitionWidth}},_vm._l((_vm.$options.i18n.LOADER_LOADING_TRANSITIONS),function(message,index){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.isCurrentTransition(index)),expression:"isCurrentTransition(index)"}],key:message,ref:_vm.isCurrentTransition(index) ? 'currentTransition' : '',refInFor:true,staticClass:"gl-absolute gl-bottom-0 gl-left-0 gl-whitespace-nowrap",attrs:{"data-testid":_vm.isCurrentTransition(index) ? 'current-transition' : ''}},[_vm._v(_vm._s(message))])}),0)]},proxy:true}])})],1)],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__;
export { i18n };
