import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import { fn, concat } from '@ember/helper';
import { on } from '@ember/modifier';
import optional from 'ember-composable-helpers/helpers/optional';
import queue from 'ember-composable-helpers/helpers/queue';
import { and } from 'ember-truth-helpers';
import randomId from '../-private/random-id.js';
import argOrDefault from '../helpers/arg-or-default.js';
import classNames from '../helpers/class-names.js';
import useState from '../helpers/use-state.js';
import EuiBadge from './eui-badge.js';
import EuiButtonIcon from './eui-button-icon.js';
import EuiIcon from './eui-icon.js';
import EuiPopoverComponent from './eui-popover.js';

const EuiNotificationEvent = setComponentTemplate(precompileTemplate(`
    {{#let
      (and (argOrDefault @hasDefaultBlock true) (has-block))
      as |hasDefaultBlock|
    }}
      <div
        class={{classNames
          "euiNotificationEventMeta"
          (if hasDefaultBlock "euiNotificationEventMeta--hasContextMenu")
        }}
        ...attributes
      >
        <div class="euiNotificationEventMeta__section">

          {{#if @iconType}}
            <EuiIcon
              @iconClasses="euiNotificationEventMeta__icon"
              @type={{@iconType}}
              @color={{@iconColor}}
              {{! TODO only add one of the following html attributes }}
              aria-label={{@iconAriaLabel}}
              aria-hidden={{if @iconAriaLabel false true}}
            />
          {{/if}}

          {{#if @type}}
            <EuiBadge
              class="euiNotificationEventMeta__badge"
              @color={{@badgeColor}}
            >
              {{#if @severity}}
                {{@type}}:
                {{@severity}}
              {{else}}
                {{@type}}
              {{/if}}
            </EuiBadge>
          {{/if}}

        </div>

        <div class="euiNotificationEventMeta__section">
          <span class="euiNotificationEventMeta__time">{{@time}}</span>
        </div>

        {{#if hasDefaultBlock}}
          {{#let
            (randomId) (useState false)
            as |randomPopoverId isPopoverOpen|
          }}
            <div class="euiNotificationEventMeta__contextMenuWrapper">
              <EuiPopover
                id={{randomPopoverId}}
                @ownFocus={{true}}
                @repositionOnScroll={{true}}
                @isOpen={{isPopoverOpen.value}}
                @panelPaddingSize="none"
                @anchorPosition="leftUp"
                @closePopover={{fn isPopoverOpen.setState false}}
              >

                <:button>
                  <EuiButtonIcon
                    {{! aria-label={contextMenuButton} }}
                    aria-controls={{randomPopoverId}}
                    aria-expanded={{isPopoverOpen.value}}
                    aria-haspopup="true"
                    @iconType="boxesVertical"
                    @color="text"
                    data-test-subj={{concat @id "-notificationEventMetaButton"}}
                    {{on
                      "click"
                      (if
                        isPopoverOpen.value
                        (fn isPopoverOpen.setState false)
                        (fn isPopoverOpen.setState true)
                      )
                    }}
                  />
                </:button>

                {{! The EuiContextMenu is wrapped with a div so it closes after an item is clicked }}
                <:content>
                  <div
                    {{on
                      "click"
                      (queue
                        (optional @onOpenContextMenu)
                        (fn isPopoverOpen.setState false)
                      )
                    }}
                    role="button"
                  >
                    {{yield}}
                  </div>
                </:content>

              </EuiPopover>
            </div>
          {{/let}}
        {{/if}}

      </div>
    {{/let}}
  `, {
  strictMode: true,
  scope: () => ({
    and,
    argOrDefault,
    classNames,
    EuiIcon,
    EuiBadge,
    randomId,
    useState,
    EuiPopover: EuiPopoverComponent,
    fn,
    EuiButtonIcon,
    concat,
    on,
    queue,
    optional
  })
}), templateOnly("eui-notification-event-meta", "EuiNotificationEvent"));

export { EuiNotificationEvent as default };
//# sourceMappingURL=eui-notification-event-meta.js.map
