(function () {
  'use strict';

  document.addEventListener('DOMContentLoaded', function () {
		var messages = window.MPAB_WALL_ADMIN_DATA || {};
    var guide = document.querySelector('[data-wall-admin-guide]');
    if (!guide) {
      return;
    }

    var panels = Array.prototype.slice.call(document.querySelectorAll('[data-wall-admin-panel]'));
    var stepButtons = Array.prototype.slice.call(document.querySelectorAll('[data-wall-admin-step]'));
    var productToggles = Array.prototype.slice.call(document.querySelectorAll('[data-wall-product-toggle]'));
    var sizeToggles = Array.prototype.slice.call(document.querySelectorAll('[data-wall-size-toggle]'));
    var enabledToggle = document.querySelector('input[name="enabled"]');

    function showStep(step, shouldScroll) {
      var target = String(step);
      panels.forEach(function (panel) {
        panel.hidden = panel.getAttribute('data-wall-admin-panel') !== target;
      });
      stepButtons.forEach(function (button) {
        if (button.getAttribute('data-wall-admin-step') === target) {
          button.setAttribute('aria-current', 'step');
        } else {
          button.removeAttribute('aria-current');
        }
      });
      syncProductSections();
      syncReview();
      if (shouldScroll) {
        guide.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }

    function syncProductSections() {
      var selected = productToggles.filter(function (toggle) {
        return toggle.checked;
      }).map(function (toggle) {
        return toggle.value;
      });

      document.querySelectorAll('[data-wall-product-section]').forEach(function (section) {
        section.hidden = selected.indexOf(section.getAttribute('data-wall-product-section')) === -1;
      });
    }

    function syncReview() {
      var productCount = productToggles.filter(function (toggle) { return toggle.checked; }).length;
      var visibleProductIds = productToggles.filter(function (toggle) { return toggle.checked; }).map(function (toggle) { return toggle.value; });
      var sizeCount = sizeToggles.filter(function (toggle) {
        var section = toggle.closest('[data-wall-product-section]');
        return toggle.checked && section && visibleProductIds.indexOf(section.getAttribute('data-wall-product-section')) !== -1;
      }).length;
      var productsOutput = document.querySelector('[data-wall-review-products]');
      var sizesOutput = document.querySelector('[data-wall-review-sizes]');
      var statusOutput = document.querySelector('[data-wall-review-status]');

      if (productsOutput) {
        productsOutput.textContent = String(productCount);
      }
      if (sizesOutput) {
        sizesOutput.textContent = String(sizeCount);
      }
      if (statusOutput) {
        statusOutput.textContent = enabledToggle && enabledToggle.checked ? (messages.shown || 'Shown to clients') : (messages.hidden || 'Hidden from clients');
      }

      productToggles.forEach(function (toggle) {
        var card = toggle.closest('.mpab-wall-product-choice');
        if (card) {
          card.classList.toggle('is-selected', toggle.checked);
        }
      });
    }

    document.addEventListener('click', function (event) {
      var stepButton = event.target.closest('[data-wall-admin-step], [data-wall-admin-next]');
      if (stepButton) {
        event.preventDefault();
        showStep(stepButton.getAttribute('data-wall-admin-step') || stepButton.getAttribute('data-wall-admin-next'), true);
        return;
      }

      var bulkButton = event.target.closest('[data-wall-select-sizes]');
      if (!bulkButton) {
        return;
      }
      event.preventDefault();
      var section = bulkButton.closest('[data-wall-product-section]');
      if (!section) {
        return;
      }
      var checked = bulkButton.getAttribute('data-wall-select-sizes') === 'all';
      section.querySelectorAll('[data-wall-size-toggle]').forEach(function (toggle) {
        toggle.checked = checked;
      });
      syncReview();
    });

    document.addEventListener('change', function (event) {
      if (event.target.matches('[data-wall-product-toggle], [data-wall-size-toggle], input[name="enabled"]')) {
        syncProductSections();
        syncReview();
      }
    });

    showStep(1, false);
  });
}());
