{% assign desktopMode = desktopMode | default: false %}
{% assign parentClass = parentClass | default: "" %}

<a class="
  {% if desktopMode %}
    np-header-avatar-tooltip-navigation-link
  {% else %}
    np-header-mobile-menu-content-button
  {% endif %}
  " onclick="toggleLanguageSelector('{{parentClass}}')">
  <span class="lang-en-US">Language</span>
  <span class="lang-es">Idioma</span>
  <span class="lang-fr">Langue</span>
  <span class="lang-de">Sprache</span>
  <span class="lang-en-GB">Language</span>
  <span class="lang-nl">Taal</span>
  <span class="lang-pt-BR">Idioma</span>
  <div
    {% if desktopMode %}
    style="padding-top: 10px;"
    {% endif %}
    class="language-selector-dropdown">
    <div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('en-US')">English (US)</div>
    <div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('es')">Español</div>
    <div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('fr')">Français</div>
    <div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('de')">Deutsch</div>
    <div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('en-GB')">English (UK)</div>
    <div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('nl')">Nederlands</div>
    <div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('pt-BR')">Português (BR)</div>
  </div>
</a>


<style>
  .language-selector-dropdown {
    position: absolute;
    width: 97%;
    background-color: white;
    z-index: 1;
    top: 54px;
    padding: 0 10px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(72, 103, 118, 0.65);
  }
  .language-selector-dropdown-item {
    align-items: center;
    background: #e4e8eb;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(72, 103, 118, 0.15);
    color: #305263;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    height: 52px;
    justify-content: center;
    margin-top: 12px;
    text-decoration: none;
    width: 100%;
  }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize dropdowns as hidden
    const dropdowns = document.querySelectorAll('.language-selector-dropdown');
    dropdowns.forEach(dropdown => {
      dropdown.style.display = 'none';
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
      const target = event.target;
      const isDropdown = target.closest('.language-selector-dropdown');
      const isToggleButton = target.closest('[onclick*="toggleLanguageSelector"]');

      if (!isDropdown && !isToggleButton) {
        dropdowns.forEach(dropdown => {
          dropdown.style.display = 'none';
        });
      }
    });
  });

  function toggleLanguageSelector(parentClass) {
    const selector = parentClass ? `.${parentClass} .language-selector-dropdown` : '.language-selector-dropdown';
    const dropdown = document.querySelector(selector);
    if (dropdown) {
      dropdown.style.display = dropdown.style.display === 'none' || dropdown.style.display === '' ? 'block' : 'none';
    }
  }

  function changeLanguage(language) {
    fetch("https://webhooks.workato.com/webhooks/rest/b60a3546-ce72-457f-bfbb-197803be77b8/change-preferred-language-nintex", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          language: language,
          userId: '{{current_person.id}}'
        })
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
      })
      .then(data => {
        const currentUrl = new URL(window.location.href);
    currentUrl.searchParams.set('lang', language);
    window.location.href = currentUrl.toString();
      })
      .catch(error => {
        console.error("Error sending language information:", error);
      });
  }
</script>