document.addEventListener("DOMContentLoaded", function () {

  const custom_player = new CustomPlayer();
  let livestream_set = true;

  const playLiveStream = function() {
    livestream_set = true;
    custom_player.setAudio('https://radioklassikstephansdom.ice.infomaniak.ch/radioklassikstephansdom.mp3', []);
    custom_player.setLiveTag(true);
    setLiveStreamData();
    custom_player.play();
  }

  const initLiveStreamButton = function () {
    document.querySelector('#live-switch').addEventListener('click', playLiveStream);
  }

  const initPlayerButtons = function () {

    Array.from(document.querySelectorAll('[data-replay="true"]')).map(btn => {
      const ending_time = btn.getAttribute('data-ending-time');
      if(!ending_time) {
        return;
      }

      if(new Date(ending_time) < new Date()) {
        btn.style.display = 'inline-block';
      }
    });


    [].slice.call(document.querySelectorAll('[data-replay="true"]')).map(function (btn) {
      btn.onclick = function (e) {
        const uid = btn.getAttribute('data-segment-identifier');
        fetch('/?type=1668557464&uid=' + uid).then(function (response) {
          response.text().then(function (file) {
            livestream_set = false;
            let track_data = JSON.parse(document.querySelector('#program').getAttribute('data-tracks'));
            const program_segment_uid = parseInt(btn.getAttribute('data-segment-identifier'));
            track_data = track_data.filter(function (list) {
              return list.program_segment.uid === program_segment_uid;
            });

            if (track_data.length > 0) {
              if (track_data[0].program_segment.host) {
                const host = track_data[0].program_segment.host;
                custom_player.setHostPortrait(host.portrait);
                custom_player.setHostDescription(host.name ? ('mit <span style="text-transform: uppercase">' + host.name + '</span>') : '');
              }
            }

            const track_list = track_data.length > 0 ? track_data[0]['tracks'] : null;
            custom_player.setTitle(btn.getAttribute('data-title'));
            custom_player.setAudio(file, Object.values(track_list));
            custom_player.setLiveTag(false);
            custom_player.play();
          })
        });
      };
    });
  };

  const setLiveStreamData = function () {
    fetch('/trackdata.json').then(function (response) {
      if (response.ok) {
        response.json().then(function (json) {
          custom_player.setLiveTag(true);
          if (json['trackData']) {
            if (!json['trackData']['composer'] && !json['trackData']['performers']) {
              custom_player.setDescription('');
            } else {
              custom_player.setDescription([
                json['trackData']['composer'],
                '<strong>' + json['trackData']['title'] + '</strong>',
                json['trackData']['performers']
              ].join('<br/>'));
            }
            custom_player.setTitle(json['trackData']['segmentTitle']);
          }

          if (json['hostData']) {
            custom_player.setHostPortrait(json['hostData']['portrait']);
            custom_player.setHostDescription(json['hostData']['name'] ? ('mit <span style="text-transform: uppercase">' + json['hostData']['name'] + '</span>') : '');
          }
        });
      }
    });
  }

  setLiveStreamData();
  setInterval(function () {
    if (livestream_set) {
      setLiveStreamData();
    }
  }, 300000);

  const initProgramCalendarWidget = function () {
    [].slice.call(document.querySelectorAll('.program-calendar .program-segment')).map(function (segment) {
      const starting_time = new Date(segment.getAttribute('data-starting-time'));
      const ending_time = new Date(segment.getAttribute('data-ending-time'));
      const now = new Date();

      if ((starting_time <= now) && (now < ending_time)) {
        segment.setAttribute('data-live', 'true');
      } else {
        segment.setAttribute('data-live', 'false');
      }
    });
    const live_segment = document.querySelector('.program-calendar [data-live="true"]');
    let initial_slide = 0
    if (live_segment) {
      initial_slide = parseInt(live_segment.getAttribute('data-index'));
    }
    const swiper = new Swiper('.program-swiper', {
      initialSlide: initial_slide,
      navigation: {
        nextEl: '#calendar-next',
        prevEl: '#calendar-prev',
      },
      breakpoints: {
        1200: {
          slidesPerView: 3,
        }
      }
    });
  };

  const bannerSliderEqHeight = function () {
    let height = 0;
    const slides = [].slice.call(document.querySelectorAll('.banner-slider .swiper-slide'));

    slides.map(function (slide) {
      slide.style.height = 'auto';
    });

    slides.map(function (slide) {
      const h = slide.getBoundingClientRect().height;
      height = height < h ? h : height;
    });

    slides.map(function (slide) {
      slide.style.height = height + 'px';
    });
  }

  const initBannerSlider = function () {
    bannerSliderEqHeight();
    const swiper = new Swiper('.banner-slider', {
      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
    });

    window.addEventListener('resize', function () {
      setTimeout(function () {
        bannerSliderEqHeight();
      }, 2000);
    });
  }

  const initThemeSlider = function () {
    const swiper = new Swiper('.topic-slider', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }

  const initDatePickers = function () {
    const flatpickr_wrap = document.querySelector('.flatpickr-wrap');
    if (flatpickr_wrap) {
      const min_date = flatpickr_wrap.getAttribute('data-from');
      const max_date = flatpickr_wrap.getAttribute('data-to');
      const fp = flatpickr('.flatpickr-wrap', {
        locale: 'de',
        wrap: true,
        disableMobile: "true",
        minDate: min_date ? min_date : null,
        maxDate: max_date ? max_date : null,
        onChange: function (selectedDates, dateStr, instance) {
          document.location.href = '/programm/sendungsprogramm/Y-' + selectedDates[0].getFullYear() + '/M-' + (selectedDates[0].getMonth() + 1) + '/T-' + (selectedDates[0].getDate())
        },
      });
    }
  }

  const initPodcastWidget = function () {
    if (document.querySelector('.podcast-swiper')) {
      new Swiper('.podcast-swiper', {
        slidesPerView: 2,
        spaceBetween: 30,
        // If we need pagination
        navigation: {
          nextEl: '.podcast-widget-next',
          prevEl: '.podcast-widget-prev',
        },
        breakpoints: {
          1200: {
            slidesPerView: 6,
          }
        }
      });
    }
  }

  const initPodcastIframe = function () {
    window.addEventListener('blur', function () {
      if (document.activeElement.parentNode.classList.contains('podcast-iframe')) {
        custom_player.pause();
      }
    });
  }

  const initAccordions = function () {
    [].slice.call(document.querySelectorAll('.accordion > header > button')).map(function (button) {
      button.addEventListener('click', function () {
        const desc = document.querySelector('#' + button.getAttribute('aria-controls'));
        desc.parentNode.classList.toggle('open');
      });
    });
  };

  const initTopicsWidget = function () {
    const button = document.querySelector('#topics-load-more');
    if (!button) {
      return;
    }

    button.addEventListener('click', function () {
      fetch('/?type=1653866824&offset=7&limit=99').then(function (response) {
        if (response.status !== 200) {
          button.style.display = 'none';
          return;
        }
        response.text().then(function (html) {
          if (html.trim() === '') {
            button.style.display = 'none';
            return;
          }

          const container = document.querySelector('#topics-ajax-loader');
          if (container) {
            container.insertAdjacentHTML('beforeend', html);
              button.style.display = 'none';
          }
        })
      })
    });
  }

  const getCurrentProgramSegment = function () {
    if (!document.querySelector('#program')) {
      return null;
    }
    const first_item = document.querySelector('.program-overview article.item');
    if (!first_item) {
      return null;
    }

    const t = first_item.getAttribute('data-time');
    if (!t) {
      return null;
    }

    const program_date = new Date(t);
    const now = new Date();

    if (program_date.getDate() !== now.getDate() || program_date.getMonth() !== now.getMonth() || program_date.getFullYear() !== now.getFullYear()) {
      return null;
    }

    let current_element = document.querySelector('#program  article.item');
    [].slice.call(document.querySelectorAll('#program article.item')).map(function (item) {
      const date = new Date(item.getAttribute('data-time'));
      if (date <= new Date()) {
        current_element = item;
      }
    });

    return current_element;
  }

  const highlightCurrentProgramSegment = function () {
    const segment = getCurrentProgramSegment();
    if(!segment) {
      return;
    }

    segment.classList.add('-live');
    // const button = document.createElement('button');
    // button.setAttribute('class', 'btn-primary -waves -live');
    // button.innerHTML = 'Live hören';
    // segment.querySelector('footer').innerHTML += button.outerHTML;
    // button.addEventListener('click', playLiveStream);
  }

  const scrollToCurrentProgramSegment = function () {
    if (!document.querySelector('#program')) {
      return;
    }

    let scroll_to_element = getCurrentProgramSegment();

    if (!scroll_to_element) {
      return;
    }

    const headerOffset = window.matchMedia('(max-width: 991px)').matches ? 10 : 200;
    setTimeout(function () {
      window.scrollTo({
        top: scroll_to_element.getBoundingClientRect().top + window.pageYOffset - headerOffset,
      })
    }, 1000);
  }

  const insertProgramAds = function () {
    if (!document.querySelector('#program')) {
      return;
    }

    let segment_before_superbanner = getCurrentProgramSegment();
    if (!segment_before_superbanner) {
      segment_before_superbanner = document.querySelector('.program-overview article.item');
    }

    if (segment_before_superbanner.nextElementSibling) {
      segment_before_superbanner = segment_before_superbanner.nextElementSibling;
    }

    const super_banner = document.createElement('div')
    super_banner.setAttribute('class', 'ad-banner -wide ajax-ad-banner');
    super_banner.setAttribute('data-adbanner-ajax', 'superbanner');

    segment_before_superbanner.parentNode.insertBefore(super_banner, segment_before_superbanner.nextSibling);

    let element_before_rectangle = segment_before_superbanner;

    if (element_before_rectangle.nextElementSibling) {
      element_before_rectangle = element_before_rectangle.nextElementSibling;
    }
    if (element_before_rectangle.nextElementSibling) {
      element_before_rectangle = element_before_rectangle.nextElementSibling;
    }

    let rectangle_banner = document.createElement('div');
    rectangle_banner.setAttribute('class', 'ad-banner -three-images');
    rectangle_banner.setAttribute('data-adbanner-ajax', 'rectangle');
    rectangle_banner.setAttribute('data-banners', document.getElementById('program').getAttribute('data-banner1'));
    element_before_rectangle.parentNode.insertBefore(rectangle_banner, element_before_rectangle.nextSibling);

    element_before_rectangle = rectangle_banner;
    if (element_before_rectangle.nextElementSibling) {
      element_before_rectangle = element_before_rectangle.nextElementSibling;
    }
    if (element_before_rectangle.nextElementSibling) {
      element_before_rectangle = element_before_rectangle.nextElementSibling;
    }

    let rectangle_banner2 = document.createElement('div');
    rectangle_banner2.setAttribute('class', 'ad-banner -three-images');
    rectangle_banner2.setAttribute('data-adbanner-ajax', 'rectangle');
    rectangle_banner2.setAttribute('data-banners', document.getElementById('program').getAttribute('data-banner2'));
    element_before_rectangle.parentNode.insertBefore(rectangle_banner2, element_before_rectangle.nextSibling);
  }

  const initTrackInfoToggle = function () {
    [].slice.call(document.querySelectorAll('.track-info-toggle')).map(function (btn) {
      btn.addEventListener('click', function () {
        if (btn.getAttribute('aria-expanded') === 'true') {
          btn.setAttribute('aria-expanded', 'false');
        } else {
          btn.setAttribute('aria-expanded', 'true');
        }
      });
    });
  }

  const initFormValidation = function () {
    [].slice.call(document.querySelectorAll('.powermail_form, [data-form-validation="true"]')).map(function (form) {
      ValidForm(form);
    });
  }

  const initShareLinksToggle = function () {
    document.addEventListener('click', function (e) {
      const share_toggle = document.querySelector('#share-toggle');
      if (!share_toggle) {
        return;
      }

      if (e.target === share_toggle) {
        share_toggle.classList.add('open');
        return;
      }

      share_toggle.classList.remove('open');
    })
  }

  const initAdBannerTrackingImages = function () {
    [].slice.call(document.querySelectorAll('.ad-banner a')).map(function (a) {
      const bannerId = a.getAttribute('data-matomo-banner-id');
      a.onclick = function () {
        if (a.parentNode.classList.contains('-wide')) {
          _paq.push(['trackEvent', 'Banner', 'Super Banner Click', bannerId]);
        } else {
          _paq.push(['trackEvent', 'Banner', 'Rectangle Banner Click', bannerId]);
        }
      }
    });
  };

  const initBannerAjax = function (callback) {
    // Superbanner
    Array.from(document.querySelectorAll('[data-adbanner-ajax="superbanner"]')).map(function (ajax_container) {
      const bannerType = ajax_container.getAttribute('data-adbanner-ajax');
      ajax_container.innerHTML = '';
      fetch('/?type=1661958358&bannerType=superbanner').then(function (response) {
        if (response.ok) {
          response.text().then(function (html) {
            if(html.trim() === '') {
              ajax_container.style.display = 'none';
              return;
            }

            ajax_container.innerHTML = html;
            initAdBannerTrackingImages();
            if (callback) {
              setTimeout(function () {
                callback()
              }, 100);
            }
          });
        }
      });
    });

    // Rectangles
    const rectangles = Array.from(document.querySelectorAll('[data-adbanner-ajax="rectangle"]'));
    if (rectangles.length === 0) {
      return;
    }

    fetch('/?type=1661958358&bannerType=rectangle').then(function (response) {
      if (response.ok) {
        response.text().then(function (html) {
          const temp_container = document.createElement('div');
          temp_container.innerHTML = html;

          rectangles.map(function(rectangle, i) {
            const elements = Array.from(temp_container.children).slice(i * 3, (i * 3) + 3);
            if (elements.length === 0) {
              rectangle.style.display = 'none';
              return;
            }

            rectangle.innerHTML += elements
              .map(function(r) {
               return r.outerHTML;
              })
              .join('');
            i ++;
          });
          initAdBannerTrackingImages();
          if (callback) {
            setTimeout(function () {
              callback()
            }, 100);
          }
        });
      }
    });
  };

  const initAdBannerTrackingIframes = function () {
    window.addEventListener('blur', function () {
      const bannerId = document.activeElement.getAttribute('data-matomo-banner-id');
      if (document.activeElement.tagName.toUpperCase() !== 'IFRAME') {
        return;
      }
      if (!bannerId) {
        return;
      }

      if (document.activeElement.parentNode.classList.contains('-wide')) {
        _paq.push(['trackEvent', 'Banner', 'Super Banner Click', bannerId]);
      } else {
        _paq.push(['trackEvent', 'Banner', 'Rectangle Banner Click', bannerId]);
      }
    });
  }

  initLiveStreamButton();
  initPlayerButtons();
  initProgramCalendarWidget();
  initBannerSlider();
  initThemeSlider();
  initPodcastWidget();
  initPodcastIframe();
  initDatePickers();
  setLiveStreamData();
  initAccordions();
  initTopicsWidget();
  initTrackInfoToggle()
  scrollToCurrentProgramSegment();
  highlightCurrentProgramSegment();
  insertProgramAds();
  initFormValidation();
  initShareLinksToggle();
  initAdBannerTrackingIframes();
  initAdBannerTrackingImages();
  initBannerAjax();

  barba.init({
    timeout: 30000,
    prefetchIgnore: true,
    transitions: [{
      name: 'default-transition',
      leave() {
        document.body.classList.add('page-loading');
      },
      enter() {
        document.body.classList.remove('page-loading');

        initPlayerButtons();
        if (document.querySelector('#program')) {
          setTimeout(function () {
            insertProgramAds();
            initBannerAjax(function () {
              scrollToCurrentProgramSegment();
              highlightCurrentProgramSegment();
            });
          }, 100);
        } else {
          window.scrollTo(0, 0);
        }
      },
      afterEnter() {
        initProgramCalendarWidget();
        initBannerSlider();
        initThemeSlider();
        initDatePickers();
        initPodcastWidget();
        initAccordions();
        initTopicsWidget();
        initTrackInfoToggle();
        initFormValidation();
        initAdBannerTrackingImages();
        initBannerAjax();

        // EXT:solr/Resources/Public/JavaScript/suggest_controller.js
        let solrSuggestController = new SuggestController();
        solrSuggestController.init();
      }
    }],
    // requestError: (trigger, action, url, response) => {
    //   // go to a custom 404 page if the user click on a link that return a 404 response status
    //   if (action === 'click' && response.status && response.status === 404) {
    //     console.log(response);
    //     return false;
    //   }
    //   console.log(response);
    //
    //   // prevent Barba from redirecting the user to the requested URL
    //   // this is equivalent to e.preventDefault()
    //   return false;
    // },
  });

  barba.hooks.enter(() => {
    window.scrollTo(0, 0);
  });

  // Barba.js fix same page reload https://github.com/barbajs/barba/issues/34
  var links = document.querySelectorAll('a[href]');
  var cbk = function (e) {
    if (e.currentTarget.getAttribute('role') == 'menuitem') {
      return;
    }
    if (e.currentTarget.href === window.location.href) {
      e.preventDefault();
      e.stopPropagation();
    }
  };

  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', cbk);
  }

  let scroll_temp = 0;
  const scrolledClass = function () {
    const scroll_top = window.pageYOffset || document.documentElement.scrollTop;
    if (scroll_top > 0) {
      document.body.classList.add('scrolled');
    } else {
      document.body.classList.remove('scrolled');
    }

    if (scroll_top > scroll_temp) {
      document.body.classList.remove('-up');
      document.body.classList.add('-down');
    } else {
      document.body.classList.remove('-down');
      document.body.classList.add('-up');
    }

    scroll_temp = scroll_top;

    if (scroll_top > 260) {
      document.body.classList.add('fixed-menu');
      setTimeout(function () {
        document.getElementById('header').style.position = 'fixed';
      }, 300);
    } else {
      document.body.classList.remove('fixed-menu');
    }
  }

  scrolledClass();
  window.addEventListener('scroll', scrolledClass);
});