import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import { get } from '@ember/helper';
import { and, eq, notEq } 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 screenReaderOnly from '../modifiers/screen-reader-only.js';
import EuiButtonGroupButton from './eui-button-group-button.js';

const EuiButtonGroup = setComponentTemplate(precompileTemplate(`
    {{#let
      (argOrDefault @buttonSize "s")
      (argOrDefault @color "text")
      (argOrDefault @isFullWidth false)
      (argOrDefault @isDisabled false)
      (argOrDefault @type "single")
      as |buttonSize color isFullWidth isDisabled type|
    }}
      {{#let
        (if (and (eq buttonSize "compressed") (eq color "ghost")) "text" color)
        (eq type "single")
        as |resolvedColor typeIsSingle|
      }}

        <fieldset
          class={{classNames
            "euiButtonGroup"
            (if isFullWidth "euiButtonGroup--fullWidth")
            (if isDisabled "euiButtonGroup--fullWidth")
            @className
            componentName="EuiButtonGroup"
            size=(argOrDefault buttonSize "s")
            color=resolvedColor
          }}
          disabled={{isDisabled}}
          ...attributes
        >
          <legend {{screenReaderOnly}}>{{@legend}}</legend>
          <div class="euiButtonGroup__buttons">
            {{#let (argOrDefault @name (randomId)) as |name|}}
              {{#each @options as |option|}}
                <EuiButtonGroupButton
                  @name={{name}}
                  @isDisabled={{if
                    (notEq option.isDisabled undefined)
                    option.isDisabled
                    isDisabled
                  }}
                  @element={{if typeIsSingle "label" "button"}}
                  @isSelected={{if
                    typeIsSingle
                    (eq option.id @idSelected)
                    (get @idToSelectedMap option.id)
                  }}
                  @color={{resolvedColor}}
                  @size={{buttonSize}}
                  @isIconOnly={{@isIconOnly}}
                  @onChange={{@onChange}}
                  @iconType={{option.iconType}}
                  @value={{option.value}}
                  @label={{option.label}}
                  @id={{option.id}}
                  @isLoading={{option.isLoading}}
                  @iconSide={{option.iconSide}}
                  @iconSize={{option.iconSize}}
                  @textClasses={{option.textClasses}}
                  @contentClasses={{option.contentClasses}}
                  @iconClasses={{option.iconClasses}}
                  @type={{option.type}}
                  class={{option.className}}
                  aria-label={{option.aria-label}}
                />
              {{/each}}
            {{/let}}
          </div>
        </fieldset>
      {{/let}}
    {{/let}}
  `, {
  strictMode: true,
  scope: () => ({
    argOrDefault,
    and,
    eq,
    classNames,
    screenReaderOnly,
    randomId,
    EuiButtonGroupButton,
    notEq,
    get
  })
}), templateOnly("eui-button-group", "EuiButtonGroup"));

export { EuiButtonGroup, EuiButtonGroup as default };
//# sourceMappingURL=eui-button-group.js.map
