jQuery(document).ready(function ($) {
  $('.select-tags').SumoSelect({
    csvDispCount: 1,
    captionFormat: 'Теги',
    captionFormatAllSelected: 'Теги',
  });

  $('select.search').SumoSelect({
    nativeOnDevice: [],
    searchText: 'Search',
    // noMatch: 'Не найдено {0}',
    search: true,
    floatWidth: 100,
  });

  $('select').SumoSelect({
    nativeOnDevice: [],
    search: false,
  });

  const catalogSectionPoster = new Swiper('.catalog-section-poster', {
    slidesPerView: 1,
    // spaceBetween: 230,
    // effect: "coverflow",
    loop: true,
    // slideToClickedSlide: true,
    // grabCursor: true,
    centeredSlides: true,
    navigation: {
      nextEl: '.swiper-next',
      prevEl: '.swiper-prev',
    },
    // slidesPerView: "auto",
    // coverflowEffect: {
    //   rotate: 0,
    //   stretch: 0,
    //   depth: 770,
    //   modifier: 1,
    //   slideShadows: false,
    // },
  });

  const categorySlider = new Swiper('.category-slider-swiper', {
    slidesPerView: 'auto',
    centeredSlides: false,
    spaceBetween: 22,
    navigation: {
      nextEl: '.swiper-next',
      prevEl: '.swiper-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },

    breakpoints: {
      200: {
        slidesPerView: 'auto',
        centeredSlides: true,
        centeredSlidesBounds: true,
        dynamicBullets: true,
        dynamicMainBullets: 3,
        spaceBetween: 22,
      },
      550: {
        slidesPerView: 'auto',
        centeredSlides: false,
        spaceBetween: 22,
      },
    },
  });

  const postersSectionItems = new Swiper('.posters-section-items', {
    slidesPerView: 3,
    // centeredSlides: false,
    spaceBetween: 32,
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
    breakpoints: {
      100: {
        slidesPerView: 1,
        spaceBetween: 32,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      700: {
        slidesPerView: 2,
        spaceBetween: 32,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      1023: {
        slidesPerView: 3,
        spaceBetween: 32,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
    },
  });

  $('.header-right-user').click(function (e) {
    e.preventDefault();
    $('.header-right-lk').toggleClass('open');
  });

  $(document).click(function (e) {
    // событие клика по веб-документу
    var div = $('.header-right-lk'); // тут указываем ID элемента
    if (
      !div.is(e.target) && // если клик был не по нашему блоку
      div.has(e.target).length === 0
    ) {
      // и не по его дочерним элементам
      $('.header-right-lk').removeClass('open');
    }
  });

  (function () {
    const headerFilterToggle = Array.from(document.querySelectorAll('.header-filter-mob-link'));
    if(headerFilterToggle.length > 0) {
      headerFilterToggle.forEach((toggler) => {
        toggler.addEventListener('click', (e) => {
          e.preventDefault();
          toggler.classList.toggle('open');
          const elements = toggler.parentNode.querySelector('.header-filter-items');
          elements.classList.toggle('open');
        });
      })
    }

    const mobileHeaderToggler = document.querySelector('.header-filter-search-toggle');
    if(mobileHeaderToggler) {
      mobileHeaderToggler.addEventListener('click', () => {
        mobileHeaderToggler.classList.toggle('header-filter-search-toggle--open');
        const menu = document.querySelector('.header-filter-mobile-content');
        menu.classList.toggle('header-filter-mobile-content--open');
      });
    }

    const mobileSearchTabs = Array.from(document.querySelectorAll('.header-filter-search-tabs button'));
    if(mobileSearchTabs.length > 0) {
      const hiddenInput = document.querySelector('.js-hidden-store-type');
      const removeActive = () => {
        mobileSearchTabs.forEach((btn) => {
          btn.classList.remove('active');
        })
      }
      mobileSearchTabs.forEach((btn) => {
        btn.addEventListener('click', () => {
          removeActive();
          hiddenInput.value = btn.dataset.val;
          btn.classList.add('active');
        })
      })
    }
  })()

  $('.header-left .header-right-user').click(function (e) {
    e.preventDefault();
    $('body').toggleClass('login-menu-open');
  });

  $('.header-right-lk-sublist-close').click(function (e) {
    e.preventDefault();
    $('body').removeClass('login-menu-open');
  });

  $('.burger').click(function (e) {
    e.preventDefault();
    $('body').toggleClass('mobile-menu-open');
  });

  $('.mobile-menu-close, .overlay').click(function (e) {
    e.preventDefault();
    $('body').removeClass('mobile-menu-open');
  });

  $('.footer-lists-item .label').click(function (e) {
    e.preventDefault();
    let parr = $(this).closest('.footer-lists-item');
    $(parr).toggleClass('open');
  });

  $('.visibility-pass').click(function (e) {
    e.preventDefault();
    let parr = $(this).closest('.input-wrapper');
    if ($(parr).hasClass('visibility')) {
      $(parr).find('input').attr('type', 'password');
    } else {
      $(parr).find('input').attr('type', 'text');
    }
    $(parr).toggleClass('visibility');
  });

  $('.popup').fancybox({});

  const exClubPosters = new Swiper('.ex-club-posters-slider', {
    slidesPerView: 4,
    // centeredSlides: false,
    spaceBetween: 30,
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
    breakpoints: {
      100: {
        slidesPerView: 1,
        spaceBetween: 32,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      700: {
        slidesPerView: 2,
        spaceBetween: 32,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      1020: {
        slidesPerView: 4,
        spaceBetween: 18,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      1200: {
        slidesPerView: 4,
        spaceBetween: 30,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
    },
  });

  $('.scrolltop-editor-tarifs').click(function () {
    let id_clicked_element = $('#editor-tarifs');
    let destination = $(id_clicked_element).offset().top - 30;
    $('html, body').animate({ scrollTop: destination }, 1000);
    return false;
  });

  $('.faq-sidebar-item-top').click(function () {
    $(this).closest('.faq-sidebar-item').toggleClass('open');
  });

  const popularPostBlog = new Swiper('.popular-posts-slider', {
    slidesPerView: 3,
    spaceBetween: 60,
    navigation: {
      nextEl: '#swiper-next-popularPostBlog',
      prevEl: '#swiper-prev-popularPostBlog',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
    breakpoints: {
      100: {
        slidesPerView: 1,
        spaceBetween: 20,
        navigation: false,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      700: {
        slidesPerView: 2,
        spaceBetween: 20,
        navigation: false,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      1023: {
        slidesPerView: 2,
        spaceBetween: 20,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      1250: {
        slidesPerView: 3,
        spaceBetween: 20,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      1300: {
        slidesPerView: 3,
        spaceBetween: 60,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
    },
  });

  const recentPostBlog = new Swiper('.blog-recent-comments-items', {
    slidesPerView: 4,
    spaceBetween: 70,
    navigation: {
      nextEl: '#swiper-next-recentPostBlog',
      prevEl: '#swiper-prev-recentPostBlog',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
    breakpoints: {
      100: {
        slidesPerView: 1,
        spaceBetween: 20,
        navigation: false,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      500: {
        slidesPerView: 2,
        spaceBetween: 20,
        navigation: false,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      760: {
        slidesPerView: 3,
        spaceBetween: 20,
        navigation: false,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      1023: {
        slidesPerView: 3,
        spaceBetween: 20,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      1200: {
        slidesPerView: 4,
        spaceBetween: 20,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
      1400: {
        slidesPerView: 4,
        spaceBetween: 70,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
      },
    },
  });

  $('.blog-navigation-section-list__link').click(function (e) {
    e.preventDefault();
    let par = $(this).closest('.blog-navigation-section-list__item_wrap');
    if (!$(par).hasClass('open')) {
      $('.blog-navigation-section-list__item_wrap').removeClass('open');
      $(par).addClass('open');
    } else {
      $(par).removeClass('open');
    }
  });

  $('.blog-navigation-section-sub-list-close').click(function (e) {
    e.preventDefault();
    let par = $(this).closest('.blog-navigation-section-list__item_wrap');
    $(par).removeClass('open');
  });

  $('.unsubscribe-section-sidebar-item .label').click(function (e) {
    e.preventDefault();
    let par = $(this).closest('.unsubscribe-section-sidebar-item');
    if (!$(par).hasClass('open')) {
      $('.unsubscribe-section-sidebar-item').removeClass('open');
      $(par).addClass('open');
    } else {
      $(par).removeClass('open');
    }
  });

  $('#mobile-navigation-item-search').click(function (e) {
    e.preventDefault();
    $(this).toggleClass('active');
    $('body').toggleClass('mobile-search-open');
  });
  $('.search-mobile-block__top-close').click(function (e) {
    e.preventDefault();
    $('body').removeClass('mobile-search-open');
    $('#mobile-navigation-item-search').removeClass('active');
  });

  const alsoLike = new Swiper('.also-like-slider', {
    slidesPerView: 1,
    spaceBetween: 20,
    navigation: {
      nextEl: '#also-like-slider-button-next',
      prevEl: '#also-like-slider-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
    breakpoints: {
      767: {
        slidesPerView: 3,
      },
      1024: {
        slidesPerView: 4,
      },
      1440: {
        slidesPerView: 5,
      },
    },
  });

  $('.my-cart-tips-block-top').click(function (e) {
    $('.my-cart-tips-block').toggleClass('open');
  });

  const imageNavSlider = new Swiper('.section-image-left-big-slider-nav', {
    slidesPerView: 5,
    spaceBetween: 17,
    direction: 'vertical',
    centeredSlides: true,
    centeredSlidesBounds: true,
    allowTouchMove: false,

    navigation: {
      nextEl: '#section-image-left-big-slider-nav-next',
      prevEl: '#section-image-left-big-slider-nav-prev',
    },
    // pagination: {
    //   el: '.swiper-pagination',
    //   type: 'bullets',
    // },
    breakpoints: {
      100: {
        slidesPerView: 3,
        spaceBetween: 10,
        direction: 'horizontal',
        centeredSlides: false,
        centeredSlidesBounds: true,
        allowTouchMove: false,
      },
      350: {
        slidesPerView: 4,
        spaceBetween: 14,
        direction: 'horizontal',
        centeredSlides: false,
        centeredSlidesBounds: true,
        allowTouchMove: false,
      },
      1030: {
        slidesPerView: 5,
        spaceBetween: 14,
        direction: 'horizontal',
        centeredSlides: false,
        centeredSlidesBounds: true,
        allowTouchMove: false,
      },
      1200: {
        slidesPerView: 5,
        spaceBetween: 17,
        direction: 'vertical',
        centeredSlides: true,
        centeredSlidesBounds: true,
        allowTouchMove: false,
      },
    },
  });

  const imageBigSlider = new Swiper('.section-image-left-big-slider-swiper', {
    slidesPerView: 1,
    thumbs: {
      swiper: imageNavSlider,
    },
  });

  $('.popup-image').fancybox({
    Image: {
      zoom: true,
    },

    mainClass: 'sdaskdakadjkadjadklajdada',
  });

  $('.copy-code-button').click(() => {
    $('.copy-code').toggleClass('open');
  });

  $('.header-filter-search input').focus(() => {
    $('.header-filter-search').addClass('open');
  });

  $('.header-filter-search-subblock-close').click((e) => {
    e.preventDefault();
    $('.header-filter-search').removeClass('open');
  });

  $(document).on('afterClose.fb', function( e, instance, slide ) {
    const promocodeInput = document.getElementById('promoinput');
    const promocodePercent = document.getElementById('promopercent');
    const promocodeToggle = document.querySelector('.popup-ex-pay-promocode-toggle');
    if(promocodeToggle) {
      const promocodeInner = document.querySelector('.popup-ex-pay-cupon-form');
      promocodeInner.classList.remove('show');
    }
    if(promocodeInput) {
      promocodeInput.value = '';
    }
    if(promocodePercent) {
      promocodePercent.value = '';
    }
  });

  const initLicenseVideos = () => {
    const slider = new Swiper('.license-video-list__slider', {
      slidesPerView: 'auto',
      direction: 'horizontal',
      centeredSlides: false,
      centeredSlidesBounds: true,
      autoHeight: false,
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true,
      },

      breakpoints: {
        769: {
          direction: 'vertical',
          autoHeight: true,
          scrollbar: {
            el: '.swiper-scrollbar',
            draggable: true,
            dragSize: 90,
          },
          pagination: false,
        },
        450: {
          pagination: false,
        },
      },
    });
    const licensePlaylist = document.querySelector('.license-playlist');
    if(licensePlaylist) {
      const videoThumbs = Array.from(licensePlaylist.querySelectorAll('.license-video-thumb'));
      const descTitle = licensePlaylist.querySelector('.license-video-desc h3');
      let player;
      const activeThumb = videoThumbs.find((thumb) => {
        return thumb.classList.contains('license-video-thumb--active');
      })
      const firstVideoId = activeThumb.dataset.video;
      const firstVideoTitle = activeThumb.dataset.title;
      const playerWrapper = licensePlaylist.querySelector('.license-video');

      const initYoutube = () => {
        const tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        const firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      }
      const resetThumbs = () => {
        videoThumbs.forEach((thumb) => {
          thumb.classList.remove('license-video-thumb--active')
        })
      }
      const setThumbActive = (thumb) => {
        thumb.classList.add('license-video-thumb--active');
      }
      const setNewVideoToPlayer = (videoId) => {
        player.stopVideo()
        player.loadVideoById(videoId);
      }
      const setTitle = (text) => {
        descTitle.innerHTML = text;
      }

      const initThumbClick = () => {
        videoThumbs.forEach((thumb) => {
          thumb.addEventListener('click', () => {
            const videoId = thumb.dataset.video;
            const title = thumb.dataset.title;
            setNewVideoToPlayer(videoId);
            setTitle(title);
            resetThumbs();
            setThumbActive(thumb);
          });
        })
      };

      window.onYouTubeIframeAPIReady = () => {
        player = new YT.Player('license-player', {
          height: playerWrapper.clientHeight,
          width: playerWrapper.clientWidth,
          videoId: firstVideoId,
        });
        setTitle(firstVideoTitle);
        initThumbClick();
      }
      initYoutube();
    }
  }

  initLicenseVideos();
});