import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import { fn, hash } from '@ember/helper';
import { on } from '@ember/modifier';
import randomId from '../../../-private/random-id.js';
import EuiFlexGrid from '../../eui-flex-grid.js';
import EuiFlexItem from '../../eui-flex-item.js';
import EuiI18nComponent from '../../eui-i18n.js';
import EuiLink from '../../eui-link.js';
import EuiTitle from '../../eui-title.js';

const EuiCommonlyUsedTimeRanges = setComponentTemplate(precompileTemplate(`
    {{#let (randomId) as |legendId|}}
      <fieldset>
        <EuiTitle id={{legendId}} @tagName="legend" @size="xxxs">
          <EuiI18n
            @token="euiCommonlyUsedTimeRanges.legend"
            @default="Commonly used"
            as |Token|
          >
            <Token as |value|>
              {{value}}
            </Token>
          </EuiI18n>
        </EuiTitle>
        <div class="euiQuickSelectPopover__section">
          <EuiFlexGrid
            aria-labelledby={{legendId}}
            @gutterSize="s"
            @columns={{2}}
            @direction="column"
            @responsive={{false}}
            @tagName="ul"
          >
            {{#each @commonlyUsedRanges as |range|}}
              <EuiFlexItem
                class="euiQuickSelectPopover__sectionItem"
                @tagName="li"
              >
                <EuiLink
                  {{on
                    "click"
                    (fn @applyTime (hash start=range.start end=range.end))
                  }}
                >
                  {{range.label}}
                </EuiLink>
              </EuiFlexItem>
            {{/each}}
          </EuiFlexGrid>
        </div>
      </fieldset>
    {{/let}}
  `, {
  strictMode: true,
  scope: () => ({
    randomId,
    EuiTitle,
    EuiI18n: EuiI18nComponent,
    EuiFlexGrid,
    EuiFlexItem,
    EuiLink,
    on,
    fn,
    hash
  })
}), templateOnly("eui-commonly-used-time-ranges", "EuiCommonlyUsedTimeRanges"));

export { EuiCommonlyUsedTimeRanges as default };
//# sourceMappingURL=eui-commonly-used-time-ranges.js.map
