(function () {
  'use strict';

  var ACTIVE_CLASS = 'is-active';
  var VISIBLE_CLASS = 'is-visible';
  var STYLE_ID = 'shop-views-toggle-styles';
  var STORAGE_KEY = 'shopView';

  function getSavedView() {
    try {
      var saved = localStorage.getItem(STORAGE_KEY);
      return (saved === '2nd') ? '2nd' : '1st';
    } catch (e) {
      return '1st';
    }
  }

  function saveView(view) {
    try {
      localStorage.setItem(STORAGE_KEY, view);
    } catch (e) {}
  }

  function injectStyles() {
    if (document.getElementById(STYLE_ID)) return;
    var style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = [
      '.product_list { position: relative; }',
      '.product_list .collection._1st_view,',
      '.product_list .collection._2nd_view {',
      '  transition: opacity 0.25s ease, transform 0.25s ease;',
      '}',
      '.product_list .collection._1st_view:not(.is-visible),',
      '.product_list .collection._2nd_view:not(.is-visible) {',
      '  opacity: 0;',
      '  transform: scale(0.98);',
      '  pointer-events: none;',
      '  position: absolute;',
      '  top: 0; left: 0; right: 0;',
      '  visibility: hidden;',
      '}',
      '.product_list .collection._1st_view.is-visible,',
      '.product_list .collection._2nd_view.is-visible {',
      '  opacity: 1;',
      '  transform: scale(1);',
      '  position: relative;',
      '  visibility: visible;',
      '}'
    ].join('\n');
    document.head.appendChild(style);
  }

  function init() {
    var viewsOptions = document.querySelector('.views_options');
    var collection1 = document.querySelector('.product_list .collection._1st_view');
    var collection2 = document.querySelector('.product_list .collection._2nd_view');

    if (!collection1) return false;

    injectStyles();

    if (!collection2) {
      collection1.classList.add(VISIBLE_CLASS);
      return true;
    }

    if (!viewsOptions) {
      collection1.classList.add(VISIBLE_CLASS);
      return true;
    }

    function setView(isFirst) {
      var generalBtn = viewsOptions.querySelector('.general_view');
      var additionalBtn = viewsOptions.querySelector('.additional_view');
      if (generalBtn) generalBtn.classList.toggle(ACTIVE_CLASS, isFirst);
      if (additionalBtn) additionalBtn.classList.toggle(ACTIVE_CLASS, !isFirst);
      collection1.classList.toggle(VISIBLE_CLASS, isFirst);
      collection2.classList.toggle(VISIBLE_CLASS, !isFirst);
      saveView(isFirst ? '1st' : '2nd');
    }

    function applyInitialView() {
      var saved = getSavedView();
      setView(saved === '1st');
      if (!collection1.classList.contains(VISIBLE_CLASS) && !collection2.classList.contains(VISIBLE_CLASS)) {
        setView(true);
      }
    }

    viewsOptions.addEventListener('click', function (e) {
      var target = e.target.closest('.general_view');
      if (target && target.closest('.views_options')) {
        e.preventDefault();
        setView(true);
        return;
      }
      target = e.target.closest('.additional_view');
      if (target && target.closest('.views_options')) {
        e.preventDefault();
        setView(false);
      }
    });

    applyInitialView();

    var resizeTid;
    window.addEventListener('resize', function () {
      if (resizeTid) clearTimeout(resizeTid);
      resizeTid = setTimeout(function () {
        resizeTid = 0;
        applyInitialView();
      }, 150);
    });

    return true;
  }

  function run() {
    if (init()) return;
    setTimeout(function () {
      init();
    }, 300);
    setTimeout(function () {
      init();
    }, 1000);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', run);
  } else {
    run();
  }
})();