'use strict';

const active = 'active';
const show = 'show';

const $body = $('body');
const $header = $('#header');
const $submenuHandler = $('.sub-menu-handler');
let lastScroll = window.pageYOffset;

const Bundle = (function () {
  const svgInjection = () => {
    const SVGs = document.querySelectorAll('img.svg');
    SVGInjector(SVGs);
  };

  const header = () => {
    const $search = $('#search');
    const closeSearch = () => {
      $search.removeClass(active);
      setTimeout(() => {
        $search.removeClass(show);
        $body.removeClass('overflow-hidden');
      }, 500);
    };

    $('#hamburger').on('click', function () {
      $(this).toggleClass(active);
      $header.toggleClass('open');
      $submenuHandler.removeClass(active);
      $('#menu').slideToggle();
      $('.sub-menu').slideUp();
    });

    $('#search_trigger').on('click', function () {
      if (!$search.hasClass(show)) {
        $search.addClass(`${show} ${active}`);
        $body.addClass('overflow-hidden');
      } else {
        closeSearch();
      }
    });

    $('#search_close').on('click', function () {
      closeSearch();
    });
  };

  const initSelect = () => {
    const $selectControl = $('.select-control');

    $selectControl.each(function () {
      const $this = $(this);
      const options = $this.children('option');

      $this.wrap('<div class="select-box"></div>');
      $this.after('<div class="form-control select-box__control"></div>');

      const $select = $this.next('div.form-control.select-box__control');

      $select.text($this.children('option:selected').text());
      if ($this.attr('id')) {
        $select.attr('id', $this.attr('id'));
      }

      const $list = $('<ul />', {
        class: 'select-box__options',
      }).insertAfter($select);

      options.each(function (_, option) {
        const $option = $(option);
        if (!$option.attr('disabled') && !$option.attr('hidden')) {
          $('<li />', {
            text: $option.text(),
            rel: $option.val(),
          }).appendTo($list);
        }
      });
    });

    const $selectBox = $('.select-box__control');
    const $selectMenu = $('.select-box__options');
    const $selectList = $selectMenu.children('li');

    $selectBox.on('click', function (event) {
      const _this = $(this);
      event.stopPropagation();

      if (_this.hasClass(active)) {
        _this.removeClass(active);
        _this.next().removeClass(show);
      } else {
        $selectBox.removeClass(active);
        $selectMenu.removeClass(show);

        _this.addClass(active);
        _this.next().addClass(show);
      }
    });

    $selectList.on('click', function () {
      const _this = $(this);
      _this.parent().parent().find('select').val(_this.attr('rel'));
      _this.parent().prev().text(_this.text());
    });

    $('body').on('click', function () {
      $selectBox.removeClass(active);
      $selectMenu.removeClass(show);
    });
  };

  const fileUpload = () => {
    const fileEl = document.querySelectorAll('.file-upload');
    if (!fileEl.length) return;

    fileEl.forEach((item) => {
      const $file = $(item);
      $file.find('input').on('change', function (event) {
        const name = event.target.files[0].name;
        $file.find('.file-upload__name').text(name);
      });
    });
  };

  const animation = () => {
    const animateEl = document.querySelectorAll('[data-animate]');
    const animate = (item) => {
      item.classList.add(item.dataset.animate);
      if (item.dataset.animateDelay) {
        item.style.setProperty('--animation-delay', item.dataset.animateDelay + 'ms');
      }
    };

    animateEl.forEach((item) => {
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
              animate(item);
              // Stop observing the item once it has been animated
              observer.unobserve(entry.target);
            }
          });
        },
        { threshold: 0.5 }
      );

      // Immediately animate elements that are already in the viewport on page load
      if (item.getBoundingClientRect().top < window.innerHeight) {
        animate(item);
      } else {
        // Observe elements that are not yet in the viewport
        observer.observe(item);
      }
    });
  };

  const blog = () => {
    const blogSwiper = document.getElementById('blog_swiper');

    if (!blogSwiper) return;

    new Swiper(blogSwiper.querySelector('.swiper'), {
      slidesPerView: 1,
      spaceBetween: 16,

      navigation: {
        nextEl: blogSwiper.querySelector('.swiper-button-next'),
        prevEl: blogSwiper.querySelector('.swiper-button-prev'),
      },

      breakpoints: {
        576: { slidesPerView: 2, spaceBetween: 32 },
        768: { slidesPerView: 2, spaceBetween: 48 },
      },
    });
  };

  const project = () => {
    const projectSwiper = document.querySelectorAll('.project-swiper');
    const hideSlides = (swiper) => {
      const slides = swiper.slides;
      const active = swiper.activeIndex;
      const prev = (active - 1 + slides.length) % slides.length;
      const next = (active + 1) % slides.length;

      slides.forEach((slide, i) => {
        if (i === active || i === prev || i === next) {
          slide.classList.remove('swiper-slide-hidden');
        } else {
          slide.classList.add('swiper-slide-hidden');
        }
      });
    };

    if (!projectSwiper.length) return;

    projectSwiper.forEach((el) => {
      const options = {
        slidesPerView: 1,
        spaceBetween: 16,
        centeredSlides: true,
        loop: true,
        speed: 500,

        navigation: {
          nextEl: el.querySelector('.swiper-button-next'),
          prevEl: el.querySelector('.swiper-button-prev'),
        },

        breakpoints: {
          576: { slidesPerView: 2, spaceBetween: 32 },
          992: { slidesPerView: 1, spaceBetween: 32 },
        },
      };

      // if (window.innerWidth > 991) {
      //     const prev = {
      //         translate: el.classList.contains('project-swiper--1') ? ['-125%', '-5%', 0] : ['-125%', '21.5%', 0],
      //         scale: 0.6,
      //     };
      //     const next = {
      //         translate: el.classList.contains('project-swiper--1') ? ['125%', '10%', 0] : ['125%', '-26.5%', 0],
      //         scale: 0.5,
      //     };

      //     options.effect = 'creative';
      //     options.creativeEffect = {
      //         prev: prev,
      //         next: next,
      //     };
      //     options.on = {
      //         init: hideSlides,
      //         slideChangeTransitionStart: hideSlides,
      //         setTranslate(swiper) {
      //             swiper.slides.forEach((slide) => {
      //                 slide.style.transform += ' scale(1.1)';
      //             });
      //         }
      //     }
      // }

      new Swiper(el.querySelector('.swiper'), options);
    });
  };

  const stickyInfo = () => {
    const info = document.getElementById('sticky_info');
    const footer = document.getElementById('footer');
    if (!info) return;

    footer.style.marginBottom = `${info.offsetHeight}px`;
  };

  const specification = () => {
    const specificationSwiper = document.getElementById('specification_swiper');

    if (!specificationSwiper) return;

    new Swiper(specificationSwiper.querySelector('.swiper'), {
      slidesPerView: 1,
      spaceBetween: 16,

      navigation: {
        nextEl: specificationSwiper.querySelector('.swiper-button-next'),
        prevEl: specificationSwiper.querySelector('.swiper-button-prev'),
      },

      breakpoints: {
        576: { slidesPerView: 2, spaceBetween: 32 },
        768: { slidesPerView: 3, spaceBetween: 32 },
        992: { slidesPerView: 4, spaceBetween: 32 },
      },
    });
  };

  const accordion = () => {
    const commitment = document.getElementById('commitment_accordion');
    const $head = $('.accordion__head');
    const $images = $('[data-image-id]');
    $('.accordion__body.show').slideDown();

    function activateAccordion($this) {
      const $body = $this.next('.accordion__body');
      const index = $this.parent().index();
      const isActive = $this.hasClass(active);

      if (!isActive) {
        $images.removeClass(show);
        $head.removeClass(active);
        $('.accordion__body').stop(true, true).slideUp().removeClass(show);

        $images.eq(index).addClass(show);
        $this.addClass(active);
        $body.stop(true, true).slideDown().addClass(show);
      }
    }

    if (commitment) {
      $head.on('mouseenter', function () {
        activateAccordion($(this));
      });
    }

    $head.on('click', function () {
      activateAccordion($(this));
    });
  };

  const modal = () => {
    const $dataModal = $('[data-modal]');
    const $close = $('[data-close]');
    const show = 'show';

    $dataModal.on('click', function () {
      const id = $(this).data('modal');
      $('body').addClass('modal-open');
      $(id).addClass(show);
      $(id).find('.modal__dialog').addClass(show);
    });

    $close.on('click', function () {
      const $container = $(this).closest('.modal');
      const $modal = $(this).closest('.modal__dialog');
      $('body').removeClass('modal-open');
      $modal.removeClass(show);
      setTimeout(() => {
        $container.removeClass(show);
      }, 250);
    });
  };

  const tab = () => {
    const $link = $('.tab .tab__link');

    $link.on('click', function () {
      const $this = $(this);
      const $tab = $('#' + this.dataset.tab);
      const $parent = $this.parent().parent();
      const $tabLink = $parent.find('.tab__link');
      const tablist = $parent.data('tablist');
      let $pane = $parent.parent().find('.tab-pane');

      if (tablist) {
        $pane = $(`#${tablist}`).find('.tab-pane');
      }

      if (!$this.hasClass(active)) {
        $tabLink.removeClass(active);
        $this.addClass(active);
        $pane.removeClass(active + ' ' + show);
        $tab.addClass(active);
        setTimeout(() => {
          $tab.addClass(show);
        }, 0);
      }
    });
  };

  return {
    init() {
      svgInjection();
      header();
      fileUpload();
      initSelect();
      blog();
      project();
      stickyInfo();
      specification();
      animation();
      accordion();
      modal();
      tab();

      this.onScroll();
      this.onResize();
    },

    onResize() {
      const topFooter = document.getElementById('top_footer');
      const footer = document.getElementById('footer');

      if (topFooter && footer) {
        footer.style.setProperty('--top-footer-height', `${topFooter.offsetHeight}px`);
      }

      // Check click event to sub-menu handler
      if (!$submenuHandler[0] || window.innerWidth >= 992 || $._data($submenuHandler[0], 'events')?.click) {
        return;
      }

      $submenuHandler.on('click', function () {
        const $this = $(this);
        $this.toggleClass(active);
        $this.next().slideToggle();
      });
    },

    onScroll() {
      const primary = document.getElementById('primary');
      const info = document.getElementById('sticky_info');

      if (info && primary) {
        const el = primary.firstElementChild;
        if (el) {
          $(info).toggleClass(show, $(window).scrollTop() >= el.offsetHeight - 100);
        }
      }

      const currentScroll = window.pageYOffset;
      $header.toggleClass('fixed-header', $(window).scrollTop() > 50);
      $header.toggleClass('hide', currentScroll > lastScroll && currentScroll > 100);
      lastScroll = currentScroll;
    },
  };
})();

let resizeTimeout;

jQuery(window).on('scroll', Bundle.onScroll);
jQuery(window).on('load', Bundle.init());
jQuery(window).on('resize', function () {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(Bundle.onResize, 100);
});