import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import { helper } from '@ember/component/helper';
import argOrDefault from '../helpers/arg-or-default.js';
import classNames from '../helpers/class-names.js';
import screenReaderOnly from '../modifiers/screen-reader-only.js';
import { colorMapping } from '../utils/css-mappings/eui-stat.js';
import EuiStatDescription from './eui-stat/description.js';
import EuiStatTitle from './eui-stat/title.js';

const isColorClass = helper(([input]) => {
  if (!input) return false;
  return colorMapping.hasOwnProperty(input);
});
const useScreenReader = helper(([title, description]) => {
  return typeof title === 'string' && typeof description === 'string';
});
const EuiStat = setComponentTemplate(precompileTemplate(`
  {{#let
    (classNames
      textAlign=(argOrDefault @textAlign "left") componentName="EuiStat"
    )
    (classNames
      "euiStat__title"
      (if @isLoading "euiStat__title-isLoading")
      color=(argOrDefault @titleColor "default")
      addBase=false
      componentName="EuiStat"
    )
    (argOrDefault @reverse false)
    (argOrDefault @titleSize "l")
    as |classes titleClasses reverse titleSize|
  }}
    <div class={{classes}} ...attributes>
      {{#if reverse}}
        <EuiStatTitle
          class={{titleClasses}}
          @titleElement={{@titleElement}}
          @titleSize={{titleSize}}
          @isColorClass={{isColorClass @titleColor}}
        >
          {{#if @isLoading}}
            --
          {{else}}
            {{#if (has-block "title")}}
              {{yield to="title"}}
            {{else}}
              {{@title}}
            {{/if}}
          {{/if}}
        </EuiStatTitle>
        <EuiStatDescription @descriptionElement={{@descriptionElement}}>
          {{#if (has-block "description")}}
            {{yield to="description"}}
          {{else}}
            {{@description}}
          {{/if}}
        </EuiStatDescription>
      {{else}}
        <EuiStatDescription @descriptionElement={{@descriptionElement}}>
          {{#if (has-block "description")}}
            {{yield to="description"}}
          {{else}}
            {{@description}}
          {{/if}}
        </EuiStatDescription>
        <EuiStatTitle
          class={{titleClasses}}
          @titleElement={{@titleElement}}
          @titleSize={{titleSize}}
          @isColorClass={{isColorClass @titleColor}}
        >
          {{#if @isLoading}}
            --
          {{else}}
            {{#if (has-block "title")}}
              {{yield to="title"}}
            {{else}}
              {{@title}}
            {{/if}}
          {{/if}}
        </EuiStatTitle>
      {{/if}}
      {{#if (useScreenReader @title @description)}}
        <p {{screenReaderOnly}}>
          {{#if reverse}}
            {{@title}}
            {{@description}}
          {{else}}
            {{@description}}
            {{@title}}
          {{/if}}
        </p>
      {{/if}}
      {{yield}}
    </div>
  {{/let}}
`, {
  strictMode: true,
  scope: () => ({
    classNames,
    argOrDefault,
    EuiStatTitle,
    isColorClass,
    EuiStatDescription,
    useScreenReader,
    screenReaderOnly
  })
}), templateOnly("eui-stat", "EuiStat"));

export { EuiStat as default };
//# sourceMappingURL=eui-stat.js.map
