import uniqueId from 'lodash/uniqueId';
import isObject from 'lodash/isObject';
import GlDisclosureDropdown from '../../base/new_dropdowns/disclosure/disclosure_dropdown';
import GlIcon from '../../base/icon/icon';
import GlLoadingIcon from '../../base/loading_icon/loading_icon';
import GlPopover from '../../base/popover/popover';
import GlSprintf from '../../utilities/sprintf/sprintf';
import GlLink from '../../base/link/link';
import GlTruncate from '../../utilities/truncate/truncate';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  name: 'GlDashboardPanel',
  components: {
    GlDisclosureDropdown,
    GlLoadingIcon,
    GlIcon,
    GlPopover,
    GlSprintf,
    GlLink,
    GlTruncate
  },
  props: {
    /**
     * CSS classes to apply to the panel container.
     */
    containerClass: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * Additional CSS classes to apply to the `#body` slot container.
     */
    bodyContentClass: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * Used to set the color of the panel border.
     */
    borderColorClass: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * The string to render as the panel title.
     */
    title: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * The name of the icon to render next to the panel title.
     */
    titleIcon: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * The CSS classes to apply to the title icon.
     */
    titleIconClass: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * Configuration object for the title popover. Expected structure:
     * **Deprecated:** Use slots `#info-popover-content` and `#info-popover-title` instead.
     *
     * - `description`: The popover text content with interpolation placeholders.
     *   Uses `%{linkStart}` and `%{linkEnd}` as markers for where a link should be inserted.
     *
     * - `descriptionLink`: The optional URL that will be used for the link portion
     *   of the description text between the linkStart and linkEnd markers.
     *
     * @deprecated Use slots `#info-popover-content` and `#info-popover-title` instead.
     */
    titlePopover: {
      type: Object,
      required: false,
      default: () => ({})
    },
    /**
     * CSS classes to apply to the title popover (gets passed to the `css-classes` prop of the `GlPopover` component).
     */
    titlePopoverClasses: {
      type: [Array, String, Object],
      required: false,
      default: ''
    },
    /**
     * The string to render as the panel subtitle.
     */
    subtitle: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * Set to `true` to show the loading state.
     */
    loading: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * Set to `true` for long-running operations.
     */
    loadingDelayed: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * The string to render while loading is delayed.
     */
    loadingDelayedText: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * Array of `GlDisclosureDropdown` items to display in the dropdown.
     */
    actions: {
      type: Array,
      required: false,
      default: () => [],
      validator: actions => actions.every(a => isObject(a))
    },
    /**
     * The toggle text for the `GlDisclosureDropdown` dropdown.
     */
    actionsToggleText: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      panelId: uniqueId('gl-dashboard-panel-id-'),
      titlePopoverId: uniqueId('gl-dashboard-panel-title-popover-id-')
    };
  },
  computed: {
    borderClass() {
      var _this$borderColorClas;
      if (((_this$borderColorClas = this.borderColorClass) === null || _this$borderColorClas === void 0 ? void 0 : _this$borderColorClas.length) > 0) {
        return `gl-border-t-2 gl-border-t-solid ${this.borderColorClass}`;
      }
      return '';
    },
    containerClasses() {
      return `${this.containerClass} ${this.borderClass}`;
    },
    bodyClasses() {
      return this.loading ? 'gl-flex gl-flex-wrap gl-content-center gl-text-center gl-flex-grow' : `gl-grow gl-overflow-y-auto gl-overflow-x-hidden ${this.bodyContentClass}`;
    },
    hasTitleIcon() {
      return Boolean(this.titleIcon);
    },
    hasTitle() {
      return Boolean(this.title);
    },
    hasInfoPopoverContentSlot() {
      return Boolean(this.$scopedSlots['info-popover-content']);
    },
    hasInfoPopoverTitleSlot() {
      return Boolean(this.$scopedSlots['info-popover-title']);
    },
    hasTitlePopover() {
      var _this$titlePopover;
      return Boolean((_this$titlePopover = this.titlePopover) === null || _this$titlePopover === void 0 ? void 0 : _this$titlePopover.description) || this.hasInfoPopoverContentSlot || this.hasInfoPopoverTitleSlot;
    },
    hasTitlePopoverLink() {
      var _this$titlePopover2;
      return Boolean((_this$titlePopover2 = this.titlePopover) === null || _this$titlePopover2 === void 0 ? void 0 : _this$titlePopover2.descriptionLink);
    },
    shouldShowActions() {
      var _this$actions;
      return ((_this$actions = this.actions) === null || _this$actions === void 0 ? void 0 : _this$actions.length) > 0;
    },
    isLoadingDelayed() {
      return this.loadingDelayed && Boolean(this.loadingDelayedText);
    }
  }
};

/* 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-border gl-h-full !gl-overflow-visible gl-rounded-lg gl-bg-default gl-p-5",class:_vm.containerClasses,attrs:{"id":_vm.panelId}},[_c('div',{staticClass:"gl-flex gl-h-full gl-flex-col"},[_c('div',{staticClass:"gl-mb-3 gl-flex gl-items-start gl-justify-between",attrs:{"data-testid":"panel-title"}},[_c('div',{staticClass:"gl-flex gl-items-center gl-overflow-hidden"},[(_vm.hasTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",class:_vm.titleIconClass,attrs:{"name":_vm.titleIcon,"data-testid":"panel-title-icon"}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-min-w-0"},[(_vm.hasTitle)?_c('gl-truncate',{staticClass:"gl-font-bold gl-text-default",attrs:{"text":_vm.title,"with-tooltip":""}}):_vm._e(),_vm._v(" "),(_vm.subtitle)?_c('p',{staticClass:"gl-mb-0 gl-mt-1 gl-text-sm gl-text-subtle",attrs:{"data-testid":"panel-subtitle"}},[_vm._v("\n            "+_vm._s(_vm.subtitle)+"\n          ")]):_vm._e()],1),_vm._v(" "),(_vm.hasTitlePopover)?[_c('gl-icon',{staticClass:"gl-ml-2 gl-min-w-5",attrs:{"id":_vm.titlePopoverId,"data-testid":"panel-title-popover-icon","name":"information-o","variant":"info"}}),_vm._v(" "),_c('gl-popover',{attrs:{"data-testid":"panel-title-popover","boundary":"viewport","target":_vm.titlePopoverId,"css-classes":_vm.titlePopoverClasses},scopedSlots:_vm._u([(_vm.hasInfoPopoverTitleSlot)?{key:"title",fn:function(){return [_vm._t("info-popover-title")]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.hasInfoPopoverContentSlot)?[_vm._t("info-popover-content")]:_vm._e(),_vm._v(" "),(!_vm.hasInfoPopoverContentSlot)?[(_vm.hasTitlePopoverLink)?_c('gl-sprintf',{attrs:{"message":_vm.titlePopover.description},scopedSlots:_vm._u([{key:"link",fn:function(ref){
var content = ref.content;
return [_c('gl-link',{staticClass:"gl-text-sm",attrs:{"href":_vm.titlePopover.descriptionLink}},[_vm._v(_vm._s(content))])]}}],null,false,3051540671)}):[_vm._v(" "+_vm._s(_vm.titlePopover.description)+" ")]]:_vm._e()],2)]:_vm._e()],2),_vm._v(" "),(_vm.shouldShowActions || _vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-flex-col gl-items-end gl-gap-2",attrs:{"data-testid":"panel-actions-filters-container"}},[(_vm.shouldShowActions)?_c('gl-disclosure-dropdown',{attrs:{"items":_vm.actions,"icon":"ellipsis_v","toggle-text":_vm.actionsToggleText,"text-sr-only":"","no-caret":"","placement":"bottom-end","fluid-width":"","toggle-class":"gl-ml-1","category":"tertiary","positioning-strategy":"fixed","size":"small"},on:{"shown":function($event){return _vm.$emit('dropdownOpen')},"hidden":function($event){return _vm.$emit('dropdownClosed')}},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
var item = ref.item;
return [_c('span',[_vm._v(_vm._s(item.text))])]}}],null,false,3418607560)}):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-items-center gl-justify-end",attrs:{"data-testid":"panel-filters-container"}},[_vm._t("filters")],2):_vm._e()],1):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.bodyClasses},[(_vm.loading)?[_c('gl-loading-icon',{staticClass:"gl-min-h-8 gl-w-full",attrs:{"size":"lg"}}),_vm._v(" "),(_vm.isLoadingDelayed)?_c('div',{staticClass:"gl-w-full gl-text-subtle",attrs:{"data-testId":"panel-loading-delayed-indicator"}},[_vm._v("\n          "+_vm._s(_vm.loadingDelayedText)+"\n        ")]):_vm._e()]:_vm._t("body")],2),_vm._v(" "),_vm._t("alert-message",null,{"panelId":_vm.panelId})],2)])};
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__ = /*#__PURE__*/__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 { __vue_component__ as default };
