import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
import { FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
import { i as initI18n } from './index-41363fa6.js';

const ezAlertListCss = ":host {\n  display: flex;\n\n  /* Alert List */\n  \n  /*@doc Define a largura da lista minimizado */\n  --ez-alert-list__container--width: 680px;\n  /*@doc Define a altura da lista minimizado */\n  --ez-alert-list__container--height: 220px;\n  \n  /*@doc Define a largura da lista maximizada */\n  --ez-alert-list__container--width--expanded: 920px;\n  /*@doc Define a altura da lista maximizada */\n  --ez-alert-list__container--height--expanded: 540px;\n\n  /* Title */\n  /*@doc Define a fonte do título do componente */\n  --ez-alert-list__title--font-family: var(--font-pattern, \"Roboto\");\n  /*@doc Define o tamanho da fonte do título do popup.*/\n  --ez-alert-list__title--font-size: var(--title--large, 20px);\n  /*@doc Define a cor da fonte do título do popup.*/\n  --ez-alert-list__title--color: var(--title--primary, #2b3a54);\n  /*@doc Define o peso da fonte do título do popup.*/\n  --ez-alert-list__title--font-weight: var(--text-weight--extra-large, 700);\n\n  /* @doc Define a borda inferior do item da lista. */\n  --ez-list__item--border-bottom: var(--border--small, 1px solid);\n\n  /* @doc Define a cor da borda inferior do item da lista. */\n  --ez-list__item--border-bottom-color: var(--color--strokes, #DCE0E8);\n\n  /* @doc Define o tipo da quebra de linha do item da lista. */\n  --ez-list__item--white-space: break-space;\n}\n\n.alert-list__content {\n  display: flex;\n  flex-direction: column;\n  \n  gap: var(--space--xs);\n  margin: var(--space--large, 24px);\n  width: 100%;\n}\n\n.alert-list__container {\n  z-index: var(--ez-elevation--8, 8);\n  display: flex;\n  height: var(--ez-alert-list__container--height);\n  width: var(--ez-alert-list__container--width);\n  border-radius: var(--border--radius-medium);\n  background-color: var(--background--xlight);\n  box-shadow: var(--shadow--medium);\n\n  &.expanded {\n    height: var(--ez-alert-list__container--height--expanded);\n    width: var(--ez-alert-list__container--width--expanded);\n  }\n\n  @media (max-height: 640px) {\n    max-height: calc(100vh - var(--space--3xl));\n  }  \n}\n\n.alert-list__header {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.alert-list__title {\n  font-family: var(--ez-alert-list__title--font-family);\n  font-size: var(--ez-alert-list__title--font-size);\n  font-weight: var(--ez-alert-list__title--font-weight);\n  color: var(--ez-alert-list__title--color);\n}\n\n.alert-list__header__buttons {\n  display: flex;\n  gap: var(--space--xs);\n}\n\n.alert-list__expandable-content {\n  overflow-y: auto;\n  scrollbar-width: thin;\n}\n\n";

const EzAlertList = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this._container = undefined;
    this.alerts = [];
    this.enableDragAndDrop = undefined;
    this.enableExpand = true;
    this.itemRightSlotBuilder = undefined;
    this.opened = true;
    this.expanded = false;
  }
  observeOpened() {
    if (this.opened) {
      this.manageOverlay();
    }
  }
  /**
   * Retorna o id do alerta a partir do título e do índice.
   */
  alertId(title, index) {
    const concatTitle = (title) => { var _a; return (_a = title === null || title === void 0 ? void 0 : title.split(' ').join('-')) !== null && _a !== void 0 ? _a : ""; };
    return `alert-${index}-${concatTitle(title)}`;
  }
  /**
   * Retorna o título do alerta a partir do id.
   */
  getAlertTitle(id) {
    var _a;
    return (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === id)) === null || _a === void 0 ? void 0 : _a.title;
  }
  /**
   * Retorna o link para o titulo do alerta a partir do id.
   */
  getLinkActionClick(item) {
    var _a;
    const action = (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === item.id)) === null || _a === void 0 ? void 0 : _a.onClickLink;
    if (action)
      return action;
    return () => { };
  }
  /**
    * Retorna o texto do título do alerta.
    */
  getTitleText(item) {
    var _a;
    const title = (_a = this.getAlertTitle(item.id)) !== null && _a !== void 0 ? _a : '';
    return `${title}${(title && item.label) ? ':' : ''}`;
  }
  /**
   * Gerencia a exibição do conteúdo expandido.
   */
  toggleExpandContainer() {
    if (!this.enableExpand) {
      return;
    }
    this.expanded = !this.expanded;
    this._container.classList.toggle('expanded', this.expanded);
    if (this.expanded) {
      this.updatePosition(this.getBoundingRight(), this.getBoundingBottom());
    }
    else {
      this.updatePosition(`10px`, `10px`);
    }
  }
  /**
   * Gerencia a exibição do overlay usando FloatingManager do Core.
   */
  manageOverlay() {
    if (this.opened && this._container) {
      this._overlayId = FloatingManager.float(this._container, this._overlayRef, this.getFloatOptions());
    }
    else {
      if (this._overlayId === undefined)
        return;
      FloatingManager.close(this._overlayId);
      this._overlayId = undefined;
    }
  }
  /**
   * Atualiza a posição da lista.
   */
  updatePosition(right, bottom) {
    if (this.opened) {
      FloatingManager.updateFloatPosition(this._container, this._overlayRef, Object.assign(Object.assign({}, this.getFloatOptions()), { right,
        bottom }));
    }
  }
  ;
  /**
   * Retorna valores padrões do componente
   */
  getFloatOptions() {
    return {
      autoClose: false,
      isFixed: true,
      bottom: '10px',
      right: '10px',
    };
  }
  ;
  /**
   * Retorna o valor para o alinhamento horizontal do componente.
   */
  getBoundingRight() {
    const docWidth = document.body.clientWidth;
    const boxWidth = this._container.getBoundingClientRect().width;
    return ((docWidth - boxWidth) / 2) + 'px';
  }
  /**
   * Retorna o valor para o alinhamento vertical do componente.
   */
  getBoundingBottom() {
    const docHeight = document.body.clientHeight;
    const boxHeight = this._container.getBoundingClientRect().height;
    return ((docHeight - boxHeight) / 2) + 'px';
  }
  componentDidLoad() {
    this.manageOverlay();
    if (this.opened && this._container) {
      this._container.focus();
    }
  }
  async componentWillLoad() {
    this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
    this.i18n = await initI18n();
  }
  render() {
    return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), this.opened ?
      (h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `${this.i18n('app.alerts')} (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
          this.opened = false;
        }, title: this.i18n('app.close') }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { itemSlotBuilder: this.itemRightSlotBuilder, hoverFeedback: true, itemLeftSlotBuilder: item => {
          return (h("a", { onClick: this.getLinkActionClick(item), style: {
              fontFamily: "var(--font-pattern, 'Roboto')",
              fontSize: 'var(--text--medium, 14px)',
              fontWeight: 'var(--text-weight--medium, 400)',
              color: 'var(--color--primary, #008561)',
              marginRight: '4px',
              cursor: 'pointer',
              display: 'flex',
              width: 'max-content',
              textDecoration: 'none'
            } }, this.getTitleText(item)));
        }, dataSource: this.alerts.map((alert, index) => {
          var _a;
          return {
            id: this.alertId(alert.title, index),
            label: (_a = alert.detail) !== null && _a !== void 0 ? _a : "",
          };
        }) })))))) : null));
  }
  get _element() { return getElement(this); }
  static get watchers() { return {
    "_container": ["observeOpened"]
  }; }
};
EzAlertList.style = ezAlertListCss;

export { EzAlertList as ez_alert_list };
