{% extends "standard-form.njk" %}
{% from "radios/macro.njk" import govukRadios %}
{% from "input/macro.njk" import govukInput %}

{% set errorMsg = mssgs.licence_confirm_method_error_choose %}
{% set emailError = mssgs.important_info_contact_error_email %}
{% set mobileError = mssgs.important_info_contact_error_mobile %}
{% set describedByTag = "email-hint text-hint" %}

{% set errorMap = {
        'licence-confirmation-method': {
            'any.required': { ref: '#licence-confirmation-method', text: errorMsg }
        },
        'email': {
            'string.empty': { ref: '#email', text: emailError },
            'string.email': { ref: '#email', text: emailError },
            'string.max': { ref: '#email', text: emailError }
        },
        'text': {
            'string.empty': { ref: '#text', text: mobileError },
            'string.pattern.base': { ref: '#text', text: mobileError },
            'string.max': { ref: '#text', text: mobileError }
        }
    }
%}

{% set emailHtml %}
    <div id="email-rw" class="govuk-body-m">
        {{ govukInput({
          id: "email",
          name: "email",
          type: "email",
          classes: "govuk-!-width-two-thirds",
          autocomplete: "email",
          errorMessage: { text: emailError } if error['email'],
          label: {
            text: mssgs.important_info_contact_input_email
          },
          hint: {
              text: mssgs.important_info_contact_input_email_hint
          },
          attributes: {
            spellcheck: "false",
            maxlength: "50"
          },
          value: data.licensee.email if data.licensee.email and not error['email'] else payload.email
        }) }}
    </div>
{% endset -%}

{% set textMessageHtml %}
    <div id="text-rw" class="govuk-body-m">
        {{ govukInput({
          id: "text",
          name: "text",
          type: "tel",
          autocomplete: "tel",
          classes: "govuk-!-width-one-third",
          errorMessage: { text: mobileError } if error['text'],
          label: {
            text: mssgs.important_info_contact_input_mobile
          },
          hint: {
              text: mssgs.important_info_contact_input_mobile_hint
          },
          attributes: {
            maxlength: "16"
          },
          value: data.licensee.mobilePhone if data.licensee.mobilePhone and not error['text'] else payload.text
        }) }}
     </div>
{% endset -%}

{% set itemsArray = [
    {
        value: "email",
        text: mssgs.email_alt,
        checked: payload['licence-confirmation-method'] === 'email',
        conditional: {
            html: emailHtml
        }
    },
    {
        value: "text",
        text: mssgs.important_info_contact_item_txt,
        checked: payload['licence-confirmation-method'] === 'text',
        conditional: {
            html: textMessageHtml
        }
    }
] %}

{% if data.licensee.postalFulfilment %}
    {% set title = mssgs.licence_confirm_method_how_title_you if data.isLicenceForYou else mssgs.licence_confirm_method_how_title_other %}
    {% set bodyText = mssgs.licence_confirm_method_how_body_text %}
    {% set itemsArray = (itemsArray.push(
        {
            value: "none",
            text: mssgs.licence_confirm_method_how_body_item,
            checked: payload['licence-confirmation-method'] === 'none'
        }), itemsArray)
    %}
{% else %}
    {% set title = mssgs.licence_confirm_method_where_title_you if data.isLicenceForYou else mssgs.licence_confirm_method_where_title_other %}
    {% set bodyText = mssgs.licence_confirm_method_where_body_text %}
{% endif %}

{% block pageContent %}
    <p class="govuk-body">{{ bodyText }}</p>
    {{ govukRadios({
        idPrefix: "licence-confirmation-method",
        name: "licence-confirmation-method",
        errorMessage: { text: errorMsg } if error['licence-confirmation-method'],
        items: itemsArray
    }) }}
{% endblock %}

{% block bodyEnd %}
    <script type="module" src="/public/javascript/govuk-frontend-min.js"></script>
    <script nonce="{{nonce}}" type="module">
        import { initAll } from '/public/javascript/govuk-frontend-min.js'
        initAll()
    </script>
{% endblock %}