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

{% macro TextInput(
  field,
  label=field.label | striptags,
  description=field.description,
  tooltip='',
  placeholder='',
  validation='anything',
  paragraph=False,
  disabled=False,
  initial_value='',
  noMaxWidth=False) -%}

  <textinput
    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 %}
    key='{{ field.name }}'
    inline-template>

    <div
      {% if disabled %}class="input--disabled"{% endif %}
      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 }]">

      <label for={{field.name}}>
        <div class="usa-input__title">
          {{ label }}
          {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
        </div>

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

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

      </label>

      {% if paragraph %}

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

      {% else %}

        <masked-input
          v-on:input='onInput'
          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'
          id='{{ field.name }}'
          type='text'
          {% if disabled %}
          disabled="disabled"
          {% endif %}
          ref='input'
          placeholder='{{ placeholder }}'>
        </masked-input>

      {% endif %}

      <input type='hidden' v-bind:value='rawValue' name='{{ field.name }}' />

      <template v-if='showError'>
        <span class='usa-input__message' v-html='validationError'></span>
      </template>

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