class Changelog {
   constructor() {
      this.el = $('#changelog');
      this.page = 1;
      this.compile = wpj.template.compile('#changelogTemplate');
      const me = this;
      let query = this.el.data('deploytime') ? '?time=' + this.el.data('deploytime') : '?';

      me.fetchData(query);

      this.el.on('click', '[data-nav]', function() {
         me.changeSlide($(this).data('nav'));
      });

      this.el.on('click', '[data-loader]', function() {
         me.page++;
         me.fetchData(query + '&page=' + me.page);
      });

      this.el.on('click', 'a[href*="http"]', function() {
         window.open($(this).attr('href'));
      });
   }

   changeSlide(dir) {
      if (dir === 'next') {
         this.page++;
      } else if (dir === 'prev') {
         this.page--;
      } else if (typeof dir === 'number') {
         this.page = dir;
      }

      this.el.find('[data-slide]').removeClass('active');
      this.el.find(`[data-slide=${this.page}]`).addClass('active');

      this.el.find('[data-nav="prev"]').prop('disabled', this.page === 1);
      this.el.find('[data-nav="next"]').prop('disabled', this.page === this.el.find('[data-slide]').length);
   }

   fetchData(query) {
      fetch('https://klient.wpj.cz/changelog/json/' + query)
         .then(response => response.json())
         .then(data => {
            var $wrapper = $('[data-infopanel-wrapper]');
            data.filter(item => (item.type === 'Infopanel - chyba' || item.type === 'Infopanel - zpráva')).forEach(item => {
               var infopanel = '<div class="alert alert-' + (item.type === "Infopanel - chyba" ? "danger" : "redesign")  + '">' +
                  '<span class="bi bi-info-circle-fill"></span>' +
                  '<strong class="alert-heading">' + item.title + '.</strong> ' + item.descr +
                  '</div>';
               $wrapper.append(infopanel);
            })


            var results = data.filter(item => (item.type !== 'Infopanel - chyba' && item.type !== 'Infopanel - zpráva'));

            const items = this.compile(results);
            const wrapper = this.el.find('[data-template]');
            wrapper.append(items);

            if (results.length < 10) {
               this.el.find('[data-loader]').hide();
            }

            if (this.el.find('[data-slide].changed').length) {
               let count = this.el.find('[data-slide].changed').length;

               if (count === 1) {
                  count += ' nová';
               } else if (count < 5) {
                  count += ' nové';
               } else {
                  count += ' nových';
               }

               this.el.find('[data-changes-count] [data-count]').text(count);
               this.el.find('[data-changes-count]').addClass('active');
            }
         })
         .catch(err => {
            console.log(err);
         });
   }
}

if ($('#changelog').length) {
   new Changelog();
}