{% from '@bonniernews/dn-design-system-web/assets/form-field/form-field.njk' import FormField %}
{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}

{% macro TextInput(params) %}
  {% set componentClassName = "ds-text-input" %}

  {%- set wrapperClasses = [
    componentClassName,
    "ds-force-px" if params.forcePx,
    params.classNames if params.classNames
  ] %}

  {% set password = true if params.type == 'password' else false %}

  {% call FormField(params, wrapperClasses) %}
    <input class="{{ componentClassName + '__input' }} js-field-error {{'password-toggle' if password}}" {{ "disabled" if params.disabled }} data-validation="{{ params.validation }}" type="{{ params.type | default('text') }}" id="{{params.name}}" name="{{params.name}}" placeholder=" "
    {{ "required" if params.required }}
    {{ "autofocus" if params.autoFocus }}
    {%- for attribute, value in params.attributes %}
      {{ attribute }}="{{ value }}"
    {% endfor -%}>
    {% if params.label %}
      <label class="{{ componentClassName + '__label'}}" for="{{ params.name }}">{{ params.label }}</label>
    {% endif %}
    {% if password %}
      {{ ButtonToggle({
        variant: "transparent",
        size: "sm",
        iconName: "visibility",
        selectedIconName: "visibility_off",
        isIconButton: true,
        classNames: componentClassName + "__password-toggle",
        attributes: {
          id: params.name + "-password-toggle",
          'aria-label': "Visa lösenord"
        },
        forcePx: params.forcePx
      })}}
    {% endif %}
  {% endcall %}
{% endmacro %}