{% from "components/icon.html" import Icon %}
{% from "components/tooltip.html" import Tooltip %}

{% macro TextInput(
  field,
  label=field.label | striptags,
  description=field.description,
  tooltip='',
  tooltip_title='Help',
  placeholder='',
  validation='anything',
  paragraph=False,
  disabled=False,
  initial_value='',
  classes='',
  noMaxWidth=False,
  optional=True,
  showOptional=True,
  showLabel=True,
  show_validation=True) -%}

  <textinput
    v-cloak
    name='{{ field.name }}'
    validation='{{ validation }}'
    {% if paragraph %}paragraph='true'{% endif %}
    {% if noMaxWidth %}no-max-width='true'{% endif %}
    {% if initial_value or field.data is not none %}initial-value='{{ initial_value or field.data }}'{% endif %}
    {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
    v-bind:optional={{ optional|lower }}
    key='{{ field.name }}'
    inline-template>

    <div
      class='{% if disabled %}input--disabled{% endif %} {{ classes }}'
      v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">

      {% if showLabel %}
        <label for={{field.name}}>
          <div class="usa-input__title">
            {{ label }}
            {% if optional and showOptional %}
              <span class="usa-input-label-helper">{{ "common.optional" | translate }}</span>
            {% endif %}
            {% if tooltip and not disabled %}
              {{ Tooltip(tooltip, tooltip_title) }}
            {% endif %}
          </div>

          {% if field.description %}
            <p class='usa-input__help'>
              {{ description | safe }}
            </p>
          {% endif %}

          {% if not disabled %}
            <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
            <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
          {% endif %}

        </label>
      {% endif %}

      {% if paragraph %}

        <textarea
          v-on:input='onInput'
          v-on:change='onChange'
          v-bind:value='value'
          {% if not disabled %}
          id='{{ field.name }}'
          {% endif %}
          ref='input'
          placeholder='{{ placeholder }}'>
        </textarea>

      {% else %}

        <masked-input
          v-on:input='onInput'
          v-on:blur='onBlur'
          v-on:change='onChange'
          v-bind:value='value'
          v-bind:mask='mask'
          v-bind:pipe='pipe'
          v-bind:keep-char-positions='keepCharPositions'
          v-bind:aria-invalid='showError'
          type='text'
          {% if disabled %}
          disabled="disabled"
          readonly="readonly"
          {% else %}
          id='{{ field.name }}'
          {% endif %}
          ref='input'
          placeholder='{{ placeholder }}'>
        </masked-input>

      {% endif %}

      <input
        type='hidden'
        v-bind:value='rawValue'
        {% if not disabled %}
        name='{{ field.name }}'
        {% endif %}
      />

      {% if show_validation %}
        <span v-if='showError' class='usa-input__message' v-text='validationError'></span>
      {% endif %}

    </div>
  </textinput>
{%- endmacro %}