import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import { fn } from '@ember/helper';
import { on } from '@ember/modifier';
import didInsert from '@ember/render-modifiers/modifiers/did-insert';
import optional from 'ember-composable-helpers/helpers/optional';
import { and, not, eq, or } 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 validatableControl from '../modifiers/validatable-control.js';
import EuiButtonIcon from './eui-button-icon.js';
import EuiFormControlLayout from './eui-form-control-layout.js';

const EuiFieldPassword = setComponentTemplate(precompileTemplate(`
    {{#let
      (argOrDefault @type "dual")
      (and (not (argOrDefault @isFakePrependBlock false)) (has-block "prepend"))
      (and (not (argOrDefault @isFakeAppendBlock false)) (has-block "append"))
      (argOrDefault @id (randomId))
      as |type hasPrepend hasAppend inputId|
    }}
      {{#let
        (useState (if (eq type "dual") "password" type))
        as |inputTypeState|
      }}
        {{#let
          (classNames
            (if @fullWidth "euiFieldPassword--fullWidth")
            (if @compressed "euiFieldPassword--compressed")
            (if
              (or hasPrepend hasAppend (eq type "dual"))
              "euiFieldPassword--inGroup"
            )
            (if @isLoading "euiFieldPassword--isLoading")
            (if (eq type "dual") "euiFieldPassword--withToggle")
            "euiFieldPassword"
          )
          as |classes|
        }}
          {{#let (eq inputTypeState.value "text") as |isVisible|}}
            <EuiFormControlLayout
              @icon="lock"
              @clear={{@clear}}
              @fullWidth={{@fullWidth}}
              @isLoading={{@isLoading}}
              @compressed={{@compressed}}
              @readOnly={{@readOnly}}
              @disabled={{@disabled}}
              @useGroup={{or hasPrepend (or hasAppend (eq type "dual"))}}
            >
              <:prepend as |prependClasses|>
                {{yield prependClasses inputId to="prepend"}}
              </:prepend>
              <:field>
                <input
                  id={{inputId}}
                  class={{classes}}
                  type={{inputTypeState.value}}
                  value={{@value}}
                  disabled={{@disabled}}
                  placeholder={{@placeholder}}
                  {{validatableControl @isInvalid}}
                  {{didInsert (optional @inputRef)}}
                  ...attributes
                />
              </:field>
              <:append as |appendClasses|>
                {{yield appendClasses inputId to="append"}}
                {{#if (eq type "dual")}}
                  <EuiButtonIcon
                    tabindex="-1"
                    @iconType={{if isVisible "eyeClosed" "eye"}}
                    {{on
                      "click"
                      (fn
                        inputTypeState.setState (if isVisible "password" "text")
                      )
                    }}
                  />
                {{/if}}
              </:append>
            </EuiFormControlLayout>
          {{/let}}
        {{/let}}
      {{/let}}
    {{/let}}
  `, {
  strictMode: true,
  scope: () => ({
    argOrDefault,
    and,
    not,
    randomId,
    useState,
    eq,
    classNames,
    or,
    EuiFormControlLayout,
    validatableControl,
    didInsert,
    optional,
    EuiButtonIcon,
    on,
    fn
  })
}), templateOnly("eui-field-password", "EuiFieldPassword"));

export { EuiFieldPassword as default };
//# sourceMappingURL=eui-field-password.js.map
