{% comment %}
This file is licensed under the MIT License (MIT) available on
http://opensource.org/licenses/MIT.
{% endcomment %}


{% if page.id contains 'desktop' or  page.id contains 'mobile'%}
   {% assign walletMargin = "55px" %}
{% else %}
   {% assign walletMargin = "" %}
{% endif %}
<div class="walletmenu" id="walletmenu" style="margin-bottom: {{walletMargin}}">
{% assign platformsByPlatform = site.platforms | group_by: "platform" %}
  <ul>
    <li class="wallet-all js-acc-item">
      <a data-selector="all-wallets">All Wallets</a>
    </li>
    {% for platform in platformsByPlatform %}

    {% capture platformName %}{{ platform.name | split: "=>" | last | split: '"' }}{% endcapture %}
    {% assign platformName = platformName | trim | replace: '}' '' | replace: ' ' '' %}

    {% assign platformClass = "wallet-" | append: platformName %}
    {% assign ulClass = "" %}
    {% if page.id contains platformName and platformName != 'web' and platformName != 'hardware' %}
    {% assign platformClass = platformClass | append: " active is-active" %}
    {% assign ulClass = " active" %}
    {% elsif page.id contains platformName %}
    {% assign platformClass = platformClass | append: " active" %}
    {% endif %}
    {% if platformName == 'hardware' or platformName == 'web' %}
    <li class="js-acc-item {{ platformClass }}">
      <a data-selector="{{platformName}}">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
    </li>
    {% else %}
    <li class="js-acc-item {{ platformClass }}" data-accordion="accordion">
      <a data-platform-selector="{{platformName}}" data-selector="all-wallets">{% translate walletcat{{platformName}} choose-your-wallet %}</a> 
      {% if platform.items.size > 1 %}
      <div class="walletmenu-subaccordion">
        <ul class="walletmenu-os-list {{ulClass}}">
          {% for item in platform.items %}
          {% assign osClass = "wallet-" | append: item.os.name %}
          {% if page.id contains item.id %}
            {% assign osClass = osClass | append: " active" %}
          {% endif %}
          <li class="js-acc-subitem {{ osClass }}">
            <a data-selector="{{item.os.name}}">{% translate platform{{item.os.name}} choose-your-wallet %}</a>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
    
    </li>
    {% endif %}
    {% endfor %}
  </ul>
</div>

<div class="wallet-list wallet-filter-list">
    <!-- All wallets -->
    {% for wallet in site.wallets %}
    {% assign platformList = "" %}
    {% for platform in wallet.platform %}
     {% capture platformList %}{{platformList}}{{platform.name}} {% endcapture %}
    {% endfor %}
    <div class="wallet-list-item allwallets-list-item" data-platforms="{{platformList}}" data-category="all-wallets" data-walletlevel="{{ wallet.level }}">
        <div class="wallet-list-item-link">
          <img src="/img/wallet/{{ wallet.id }}.png?{{site.time | date: '%s'}}" alt="{{ wallet.title }}" /> {{ wallet.titleshort }}
        </div>
        <p class="wallet-hint">Select an Operating System</p>
        <div class="wallet-list-os">
          {% for platform in wallet.platform %}
            {% for os in platform.os%}
              {% if platform.name == os.name %}
              <a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">
                <span class="wallet-os-ico {{os.name}}-ico"></span>
                <span class="wallet-os-ico-dark {{os.name}}-ico-dark" hidden></span>
                <span class="wallet-os-ico-bright {{os.name}}-ico-bright" hidden></span>
                <p class="wallet-ico-tooltip">{{os.name}}</p>
              </a>
              {% else %}
              <a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{os.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">
                <span class="wallet-os-ico {{os.name}}-ico"></span>
                <span class="wallet-os-ico-dark {{os.name}}-ico-dark" hidden></span>
                <span class="wallet-os-ico-bright {{os.name}}-ico-bright" hidden></span>
                <p class="wallet-ico-tooltip">{{os.name}}</p>
              </a>
              {% endif %}
            {% endfor %}
          {% endfor %}
        </div>
      </div>
    {% endfor %}

    <!-- Particular wallets-->
    {% for wallet in site.wallets %}
        {% for platform in wallet.platform %}
          {% for os in platform.os%}
          <div class="wallet-list-item" data-category="{{os.name}}" data-walletlevel="{{ wallet.level }}">
            {% if platform.name == os.name %}
            <a class="wallet-list-item-link" href="/{{ page.lang}}/wallets/{{ platform.name }}/{{ wallet.id }}/">
            {% else %}
            <a class="wallet-list-item-link" href="/{{ page.lang}}/wallets/{{ platform.name }}/{{ os.name }}/{{ wallet.id }}/">
            {% endif %}
            <img src="/img/wallet/{{ wallet.id }}.png?{{site.time | date: '%s'}}" alt="{{ wallet.title }}" /> {{ wallet.titleshort }}
            </a>
          </div>
          {% endfor %}
        {% endfor %}
    {% endfor %}
</div>

<script>
  
  // Add margin-bottom for walletmenu depending on the height of the second accordion          
  function calculateHeight(element) {
    var walletMenu = document.querySelector(".walletmenu");
    walletMenu.style.marginBottom = element.offsetHeight + 'px'; 
  }  
  
  function accordionDesktop() {
    var walletMenu = document.querySelector(".walletmenu");
    var acc = document.getElementsByClassName("js-acc-item");
    var accSub = document.querySelectorAll(".js-acc-subitem");

    for (var i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function(event) {
        if (document.documentElement.clientWidth > 768) {
          var activeItem = event.target.parentNode;

          this.classList.add('active')
          activeItem.classList.add("is-active");
          
          if (this.dataset.accordion) {
            var activeOsAccordion = activeItem.querySelector(".walletmenu-subaccordion");
            calculateHeight(activeOsAccordion);
          } else {
            walletMenu.style.marginBottom = '0px';
          }          
          
          // Hide not selected list items
          for (var index = 0; index < acc.length; index++) {
            if (!(this == acc[index])) {              
              acc[index].classList.remove("is-active");
              acc[index].classList.remove("active");
            }
          }
          
        }
      });
    }

    for (var ii = 0; ii < accSub.length; ii++) {
      var subItem = accSub[ii];
      subItem.addEventListener('click', function() {
        
        this.classList.add('active');
        
        for (var a = 0; a < accSub.length; a++) {
          if (accSub[a] != this) {
            accSub[a].classList.remove('active');
          }
        }
        
      });
    }
  }
  accordionDesktop();

  function showRelevantWallets() {
    var allWallets = document.querySelectorAll("div[data-category]");    
    var pageUrl = (window.location.pathname).split("/").filter(Boolean);
    var platform = pageUrl[2];
    var os = pageUrl[3];
    

    if (platform === "hardware" || platform === "web") {
      os = platform;
    }

    for (var i = 0; i < allWallets.length; i++) {
      var wallet = allWallets[i];
      var walletCategory = wallet.dataset.category;

      if (os != walletCategory) {
        wallet.classList.add('is-hidden');
      }
      
    }    
  }
  showRelevantWallets();
  
  function makeWalletClickable() {
    var walletsList = document.querySelectorAll('.allwallets-list-item');
        
    for (var i = 0; i < walletsList.length; i++) {
      var wallet = walletsList[i];
      
      wallet.addEventListener("mouseenter", function () {
        var walletOsList = this.querySelectorAll('.wallet-list-os-link:not(.is-hidden)');

        if (walletOsList.length === 1) {
          this.classList.add('mouseenter')
        }
      });

      wallet.addEventListener("mouseleave", function () {
        var walletOsList = this.querySelectorAll('.wallet-list-os-link:not(.is-hidden)');

        if (walletOsList.length === 1) {
          this.classList.remove('mouseenter')
        }
      });
      
    }

     walletsList.forEach(function (wallet) {
      return wallet.addEventListener("click", function () {
        var walletOsList = this.querySelectorAll('.wallet-list-os-link:not(.is-hidden)');

        if (walletOsList.length === 1) {
          var walletHref = walletOsList[0].href;
          window.location = walletHref;
        }
      });
    });


  }
  makeWalletClickable();
  
  function hideNotRelevantWallets() {
    var selectorsList = document.querySelectorAll("a[data-selector]");
    var platformSelectorList = document.querySelectorAll("a[data-platform-selector]");
    var allWallets = document.querySelectorAll("div[data-category]");
    var osLinks = document.querySelectorAll("a[data-link-platform]");
    var accSub = document.querySelectorAll(".js-acc-subitem");
    
    for (var i = 0; i < selectorsList.length; i++) {
      var selector = selectorsList[i];
      
      selector.addEventListener('click', function (e) {
        var selectedCategory = e.target.dataset.selector;

        // Remove .is-hidden class from all wallets
        allWallets.forEach(function(wallet) {
          wallet.classList.remove('is-hidden');
        })
        // Remove .is-hidden class from all wallet links
        osLinks.forEach(function(walletLink) {
          walletLink.classList.remove('is-hidden');
        })
        // Remove .active class from all submenu links
        accSub.forEach(function(subLink) {
          subLink.classList.remove('active');
        })

        // Hide not relevant wallets
        for (var ii = 0; ii < allWallets.length; ii++) {
          var wallet = allWallets[ii];
          var walletCategory = wallet.dataset.category;
          
          if (selectedCategory != walletCategory) {
            wallet.classList.add('is-hidden');
          } 
        }

      })
    }
    
    // Show only desktop or mobile wallets
    for (var a = 0; a < platformSelectorList.length; a++) {
      var platform = platformSelectorList[a];

      platform.addEventListener('click', function(e) {

        var selectedPlatform = e.target.dataset.platformSelector;
        var regexp = new RegExp(selectedPlatform, 'i');
                
        for (var aa = 0; aa < allWallets.length; aa++) {
          var walletItem = allWallets[aa];
          var walletPlatform = walletItem.dataset.platforms;
          
          if (!(regexp.test(walletPlatform))) {
            walletItem.classList.add('is-hidden');
          } else {
            var walletOsLinks = walletItem.querySelectorAll("a[data-link-platform]");
            
            for (var n = 0; n < walletOsLinks.length; n++) {
              var link = walletOsLinks[n];
              
              if (link.dataset.linkPlatform !== selectedPlatform) {
                link.classList.add("is-hidden")
              } 
            }
          }
          
        }
      })
    }
  }
  hideNotRelevantWallets();
</script>