class CollectionProduct extends HTMLElement{
    constructor(){
        super();
        this.totalPage = 0;
        this.containerHeight = 0;
        this.perRow = this.dataset.row;
        this.limit = this.dataset.limit;
        this.viewmore = this.dataset.viewmore;
        this.layout = (this.dataset.layout) ? '-' + this.dataset.layout : '';
        
        this.tagsFilter = [];
        
        this.currentPage = 1;
        
        this.initData();
        
        this.length = this.data.length;
        this.progress = 0;

        this.parser = new DOMParser();

        this.productsContainer = this.getElementsByClassName('products-container')[0];
        this.collectionGrid = document.getElementsByClassName('collection-grid__wrapper')[0];

        this.filterContainer = document.getElementsByClassName('grid__item--sidebar')[0];

        this.submitFilter = document.getElementsByClassName('submitTagsFilter');

        this.btnOpenFilterMobile = document.getElementsByClassName('js-drawer-open-collection-filters')[0];
        if(this.btnOpenFilterMobile != undefined) {
          this.btnOpenFilterText = this.btnOpenFilterMobile.querySelector(".btn-filter-text");
        }
        
        Array.from(this.submitFilter).forEach(function(btn){
          btn.addEventListener("click", this.actionSubmitFilter.bind(this));
        }, this);
        
        this.tagListActive = document.querySelectorAll('#CollectionSidebar-v2 .tag-list--active-tags');
        
        if(this.filterContainer != undefined) {
          this.filterItems = this.filterContainer.querySelectorAll('.tag span');
          Array.from(this.filterItems).forEach(function(element){
            element.addEventListener("click", this.getTagsFilter.bind(this));
          }, this);
        } 

        if(this.viewmore == '' || !this.viewmore) {
          this.createPagination();
        }else {
          this.createViewMore();
        }
        
    }
    initData(){
        this.data = [];
        let p = '';
        
        try{
          p = JSON.parse('{"handle":"hd-mini-camera-audio-recorder-10hrs-battery-use","title":"USB Mini Camera Audio Recorder 10hrs Battery Use","status":"ACTIVE","tags":["Application_No App","Battery Capacity_320 mAh","Camera Type_Black Box","Camera Type_Hidden","Camera Type_Mini","Camera Type_Spy Camera","Camera Type_Wearable","Collection_Spy Camera","Features_Construction Time Lapse","Features_Motion Activated","Features_No Phone Required","Field Of View_0 - 90 degrees","Location_Body Worn","Location_Indoor","Location_Office \/ Business","Location_Outdoor","OS Compatibility_Windows","Power Source_Battery","Recording Source_Audio + Video","Storage - Maximum Capacity_128 Gb (16 Hrs Recording)","Storage Type_Memory Card","Video Resolution - Max_HD 720p","Viewing_Memory Card Storage"]}');
 this.data.push(p);
p = JSON.parse('{"handle":"hd-1080p-mini-black-box-rotatable-security-wi-fi-camera","title":"HD 1080P Mini Black Box Rotatable Security Wi-Fi Camera","status":"ACTIVE","tags":["Battery Capacity_950 mAh","Camera Type_Black Box","Camera Type_Hidden","Camera Type_Spy Camera","Camera Type_Surveillance","Collection_Spy Camera","Connectivity_WiFi\/Wireless","Features_Motion Activated","Features_Smartphone App","Field Of View_120 - 180-degree","Live View_View Live Video","Location_Indoor","Location_Living Room","Location_Office \/ Business","Night Vision_Night Vision Enabled","OS Compatibility_Android","OS Compatibility_IOS","Power Source_Battery","Power Source_Plug In","Recording Source_Audio + Video","Storage - Maximum Capacity_128 Gb (16 Hrs Recording)","Storage Type_Cloud Recording (In-App)","Storage Type_Memory Card","Video Resolution - Max_Full HD 1080p","Viewing_Remote View"]}');
 this.data.push(p);
p = JSON.parse('{"handle":"indoor-outdoor-1080p-adjustable-mini-cam-with-150-day-standby","title":"1080P Adjustable Mini WiFi Camera with 150-Day Standby","status":"ACTIVE","tags":["1080p Resolution","Battery Capacity_2500 mAh","Battery Powered Spy Camera","Camera Features_Motion Activated","Camera Features_Smartphone App","Camera Type_Black Box","Camera Type_Mini","Camera Type_Mini Cube","Camera Type_Surveillance","Collection_Spy Camera","Colour_Black","Connectivity_WiFi\/Wireless","Features_App Push Notification","Features_Loop Recording","Features_Motion Activated","Features_Smartphone App","Features_Two-Way Audio","Field Of View_120 - 180-degree","Live View_View from Memory","Live View_View Live Video","Location_Bedroom","Location_Dining Room","Location_Indoor","Location_Living Room","Location_Nursing Home","Location_Office \/ Business","Microphone_Built-In","Mount_Base mount","night vision","Night Vision Range_0-5 Metres","Night Vision Range_5m","Night Vision_Night Vision Enabled","Office\/Business","OS Compatibility_Android","OS Compatibility_IOS","Power Source_Battery","Power Source_Plug In","Recording Source_Audio + Video","Video Playback Viewing_Memory Stored","Video Playback Viewing_Remote View","Video Resolution_Full HD 1080p","Viewing_Memory Card Storage","Viewing_Remote View"]}');
 this.data.push(p);
p = JSON.parse('{"handle":"mini-compact-security-camera-with-two-way-audio-motion-detection-night-vision","title":"Mini Compact Security WiFi Camera with Two-Way Audio, Motion Detection, Night Vision","status":"ACTIVE","tags":["1080p Resolution","Battery Capacity_800 mAh","Battery Powered Spy Camera","Bedroom","Camera Features_Motion Activated","Camera Features_Smartphone App","Camera Features_Two-Way Audio","Camera Megapixels_2MP","Camera Rotation Angle_No Rotation","Camera Type_Black Box","Camera Type_Mini","Camera Type_Mini Cube","Camera Type_Surveillance","Collection_Spy Camera","Colour_Black","Connectivity_WiFi\/Wireless","Features_App Push Notification","Features_Motion Activated","Features_Smartphone App","Features_Two-Way Audio","Field Of View_90 - 120 degrees","Live View_View Live Video","Location_Bedroom","Location_Dining Room","Location_Indoor","Location_Living Room","Location_Nursing Home","Location_Office \/ Business","Microphone_Built-In","Mount_Base mount","Night Vision Range_0-5 Metres","Night Vision Range_5m","Night Vision_Night Vision Enabled","Office\/Business","OS Compatibility_Android","OS Compatibility_IOS","Power Source_Battery","Power Source_Plug In","Recording Source_Audio + Video","Storage Type_Memory Card","Storage_Memory Card","Video Playback Viewing_Memory Stored","Video Playback Viewing_Remote View","Video Resolution_Full HD 1080p","Viewing_Memory Card Storage","Viewing_Remote View"]}');
 this.data.push(p);
        }
        catch(e){
          console.error(e);
        }
      
    }
    loadProductsGrid(start, stop, data){
      let number_product = stop - start;
      
      for(let i = start; i < stop; i++) {
        let url = window.location.origin + '/products/' + data[i].handle + "?view=grid-item" + this.layout;
        
        fetch(url)
        .then((res) => {
          if(res.status == 404){
            return false;
          }
          return res.text();
        })
        .then(res => this.addProduct(res, i, number_product))
        .catch(err => console.log(err));
      }
    }
    addProduct(res, i, number_product){
      
        this.progress++;
    
        let doc = this.parser.parseFromString(res, 'text/html');
        let product = doc.querySelector(".grid-product");


        let layout = '';
        let items_layout = document.getElementsByClassName('item-layout');
        for(let i = 0; i < items_layout.length; i++) {
          if(items_layout[i].classList.contains('active')) {
            layout = items_layout[i].dataset.layout;
          }
        }

        if(product != null) {
          product.style.display = 'flex';
          product.style.order = i + 1;
          product.classList.add(layout + '-active');
          this.productsContainer.append(product);

          let compare = product.querySelector('.SPCMP_Add_span');
          if(compare != null) {
            compare.innerText = 'COMPARE';
          }

          let add_to_cart = product.querySelector('.grid-product__add-to-cart');
          if(add_to_cart != null) {
            add_to_cart.addEventListener('click', function(e){
              e.preventDefault();
              let a_element = e.target.closest('a');
              if(!a_element.classList.contains('added')) {
                a_element.classList.add('added');
                let variant_id = a_element.dataset.variant;
        
                let formData = {
                  'items': [{
                  'id': variant_id,
                  'quantity': 1
                  }]
                };
                theme.cart.addItemFromForm(formData);
              }
              
            });
          }
        }
        
        
        
        if(this.progress == number_product) {
          this.productsContainer.setAttribute('style', '');
          if(this.viewmore == '' || !this.viewmore) {
            this.scrollToTop();
          }
          
        }

        
    }

    render(resetCurrentPage = false){
      
        if(resetCurrentPage) {
          this.currentPage = 1;
        }
        let productPerPage = this.limit;
        let end_index = this.currentPage * productPerPage;
        let start_index = end_index - productPerPage;
    
        if(this.tagsFilter.length < 1) {
          while (this.productsContainer.firstChild) this.productsContainer.removeChild(this.productsContainer.firstChild);
          let data = this.data;
          let stop_index = 0;
          if(data.length > (this.currentPage*productPerPage)) {
            stop_index = end_index
          }else{
            stop_index = data.length;
          }
          if(this.currentPage > 1) {
            this.productsContainer.style.height = this.containerHeight + 'px';
          }
          this.progress = 0;
          this.loadProductsGrid(start_index, stop_index, data);
          
          let pagination = this.productsContainer.parentElement.getElementsByClassName('pagination')[0];
          if(pagination != undefined) {
            this.productsContainer.parentElement.removeChild(pagination);
            this.createPagination(data);
          }
        }else {
          let data = [];
    
          for (let i = 0; i < this.data.length; i++) {
            let productTags = this.data[i]['tags'];
            let is_passed = false;
            for(let j = 0; j < this.tagsFilter.length; j++) {
              if(productTags.includes(this.tagsFilter[j])) {
                is_passed = true;
              }
            }
            if(is_passed) {
              data.push(this.data[i]);
            }
          }
          

          while (this.productsContainer.firstChild) this.productsContainer.removeChild(this.productsContainer.firstChild);
          if(data.length > 0) {
            let stop_index = 0;
            if(data.length > (this.currentPage*productPerPage)) {
              stop_index = end_index
            }else{
              stop_index = data.length;
            }
    
            if(this.currentPage > 1) {
              this.productsContainer.style.height = this.containerHeight + 'px';
            }
            this.progress = 0;
            this.loadProductsGrid(start_index, stop_index, data);

            let pagination = this.productsContainer.parentElement.getElementsByClassName('pagination')[0];
            this.productsContainer.parentElement.removeChild(pagination);
            this.createPagination(data);
          }else{
            let notfound = '<p class="grid__item">Sorry, there are no products in this tags.</p>';
            this.productsContainer.innerHTML = notfound;
          }
          
        }
    }

    reInitProductCompare(){
      if(typeof window.reinitializeCompare == 'function'){
        window.reinitializeCompare();

        console.log("Product Compare reinited");
      }
    }

    createPagination(data = []) {
        
        if(data.length > 0) {
          this.totalPage = data.length / this.limit;
        }else{
          this.totalPage = this.data.length / this.limit;
        }
        if(!Number.isInteger(this.totalPage )) {
          this.totalPage += 1;
        }
        
        
        let pagination = document.createElement('div');
        pagination.classList.add('pagination');
    
        let html = '';
        if(this.currentPage > 1) {
          html += '<span class="page prev">';
            html += '<a href="'+ window.location.href +'?page='+ (parseFloat(this.currentPage) - 1) +'" data-page="'+ (parseFloat(this.currentPage) - 1) +'">';
              html += '<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-left" viewBox="0 0 284.49 498.98"><path d="M249.49 0a35 35 0 0 1 24.75 59.75L84.49 249.49l189.75 189.74a35.002 35.002 0 1 1-49.5 49.5L10.25 274.24a35 35 0 0 1 0-49.5L224.74 10.25A34.89 34.89 0 0 1 249.49 0z"></path></svg>';
            html += '</a>';
          html += '</span>';
        }
        
        for(let i = 1; i <= this.totalPage; i++) {
          if(this.currentPage == i) {
            html += '<span class="page current">'+ i +'</span>';
          }else{
            html += '<span class="page"><a href="'+ window.location.href +'?page=' + i + '" data-page="'+ i +'">'+ i +'</a></span>';
          }
        }
        if(this.currentPage < parseInt(this.totalPage)) {
          html += '<span class="page next">';
            html += '<a href="'+ window.location.href +'?page='+ (parseFloat(this.currentPage) + 1) +'" data-page="'+ (parseFloat(this.currentPage) + 1) +'">';
              html += '<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-right" viewBox="0 0 284.49 498.98"><path d="M35 498.98a35 35 0 0 1-24.75-59.75l189.74-189.74L10.25 59.75a35.002 35.002 0 0 1 49.5-49.5l214.49 214.49a35 35 0 0 1 0 49.5L59.75 488.73A34.89 34.89 0 0 1 35 498.98z"></path></svg>';
            html += '</a>';
          html += '</span>';
        }
        pagination.innerHTML = html;
    
        this.productsContainer.parentElement.appendChild(pagination);
    
        let pagination_item = pagination.querySelectorAll('.page a');
        Array.from(pagination_item).forEach(function(element){
          element.addEventListener("click", this.actionPagination.bind(this));
        }, this);
    
    }
    
    actionPagination(e) {
        e.preventDefault();
        
        this.currentPage = e.target.closest('a').dataset.page;
        // if(e.path[0].nodeName == 'A') {
        //   this.currentPage = e.target.dataset.page;
        // }else{
          
        // }
        
        let current_height = this.productsContainer.offsetHeight;
        this.containerHeight = current_height;
        
        this.render();
        
    }
    createViewMore() {
      let btnViewMore = document.createElement('div');
      btnViewMore.classList.add('btn-viewmore');

      let viewMoreHtml = '<a href="javascript::void(0);">View more</a>';

      btnViewMore.dataset.times = 1;
      btnViewMore.innerHTML = viewMoreHtml;
      
      let viewMoreLink = btnViewMore.getElementsByTagName('a')[0];
      viewMoreLink.addEventListener('click', this.actionViewMore.bind(this));
      this.productsContainer.parentElement.appendChild(btnViewMore);
      
    }
    actionViewMore(e) {
      e.preventDefault();
      this.currentTimes = e.target.closest('.btn-viewmore').dataset.times;
      let productPerPage = this.limit;
      let end_index = (parseFloat(this.currentTimes) + 1) * productPerPage;
      
      let start_index = end_index - productPerPage;
      let data = this.data;
      let number_product = end_index - start_index;

      let stop_index = 0;
      if(data.length > (this.currentTimes*productPerPage)) {
        stop_index = end_index
      }else{
        stop_index = data.length;
      }
      
      for(let i = start_index; i < stop_index; i++) {
        if(data[i] != undefined) {
          let url = window.location.origin + '/products/' + data[i].handle + "?view=grid-item" + this.layout;
          fetch(url)
          .then(res => res.text())
          .then(res => this.addProduct(res, i, number_product));
        }
        if(i >= data.length) {
          let btnViewMore = this.getElementsByClassName('btn-viewmore')[0];
          btnViewMore.style.display = 'none';
        }
      }
      e.target.closest('.btn-viewmore').dataset.times = parseFloat(this.currentTimes) + 1;
    }
    getTagsFilter(e) {
      
      let tag = e.target.dataset.tag;
     
      Array.from(this.filterItems).forEach(function(element){
        
        let tag_e = element.dataset.tag;
        let parent_e = element.parentElement;
        if(parent_e.classList.contains('tag--active') && tag_e == tag) {
          parent_e.classList.remove('tag--active');
          this.removeRedTag(tag);
          let index = this.tagsFilter.indexOf(tag);
          if (index !== -1) {
            this.tagsFilter.splice(index, 1);
          }
        }else if (!parent_e.classList.contains('tag--active') && tag_e == tag) {
          
          parent_e.classList.add('tag--active');

          let is_added = false;
          let tagListActiveItems = document.querySelectorAll('.tag--remove');
          
          if(tagListActiveItems.length > 0) {
            Array.from(tagListActiveItems).forEach(function(item){
              if(item.dataset.tag == tag) {
                is_added = true;
              }
            }, this);
          }
          if(!is_added) {
            this.addRedTag(tag);
          }
          
          if(!this.tagsFilter.includes(tag)) {
            this.tagsFilter.push(tag);
          }
        }
        this.btnOpenFilterText.innerText = 'Filter (' + this.tagsFilter.length + ')';
      }, this);

      if (this.tagsFilter.length > 0 && !this.btnOpenFilterMobile.classList.contains('btn--tertiary-active')) {
        this.btnOpenFilterMobile.classList.add('btn--tertiary-active');
      } else if (this.tagsFilter.length < 1){
        this.btnOpenFilterMobile.classList.remove('btn--tertiary-active');
        this.btnOpenFilterText.innerText = 'Filter';
      }

      this.render(true);
      if (theme.FilterDrawer) {
        theme.FilterDrawer.close();
      }
      
    }

    actionSubmitFilter(e) {
      e.preventDefault();
      this.collectionGrid.classList.add('unload');
      this.filterHandle();
      let html = document.getElementsByTagName('html')[0];
      let body = document.getElementsByTagName('body')[0];
      let drawer = document.getElementById('FilterDrawer');
      if(drawer.classList.contains('drawer--is-open')) {
        drawer.classList.remove('drawer--is-open');
      }
      if(html.classList.contains('js-drawer-open') && body.classList.contains('js-drawer-open')) {
        html.classList.remove('js-drawer-open');
        body.classList.remove('js-drawer-open');
        let openFilterMobile = document.getElementsByClassName('js-drawer-open-collection-filters')[0];
        openFilterMobile.click();
      }
      
    } 
    
    filterHandle() {
      this.render(true);
      this.collectionGrid.classList.remove('unload');
    }
    
    addRedTag(tag) {
      let tag_arr = tag.split('_');
      
      let html = '<span class="btn btn--small js-no-transition" title="Remove tag '+ tag +'">'+ tag_arr[1] +'</span>';
      html += '<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"></path></svg>';

      let li_element = document.createElement('li');
      li_element.classList.add('tag','tag--remove');
      li_element.dataset.tag = tag;
      li_element.innerHTML = html;

      

      Array.from(this.tagListActive).forEach(function(ul){
 
        let duplicatedE = li_element.cloneNode(true);
        ul.appendChild(duplicatedE);

        this.actionRemoveRedTag(duplicatedE);
      }.bind(this));

    }

    removeRedTag(tag) {
    
      Array.from(this.tagListActive).forEach(function(ul){
        
        let tags_remove = ul.getElementsByTagName('li');
        for(let i = 0; i < tags_remove.length; i++) {
          if(tags_remove[i].dataset.tag == tag) {
            ul.removeChild(tags_remove[i]);
          }
        }
      }.bind(this));
      
    }

    actionRemoveRedTag(element) {
      let redTag = element.querySelector('span');
      redTag.addEventListener("click", function(e){
        
        let tag_remove = redTag.parentElement.dataset.tag;
          
        let index = this.tagsFilter.indexOf(tag_remove);
        if (index !== -1) {
          this.tagsFilter.splice(index, 1);
        }
        this.removeRedTag(tag_remove);
  
        
        Array.from(this.filterItems).forEach(function(item){
          let tag = item.dataset.tag;
          if(tag == tag_remove && item.parentElement.classList.contains('tag--active')) {
            item.parentElement.classList.remove('tag--active');
          }
        });
        if (this.tagsFilter.length < 1){
          this.btnOpenFilterMobile.classList.remove('btn--tertiary-active');
          this.btnOpenFilterText.innerText = 'Filter';
        } else {
          this.btnOpenFilterText.innerText = 'Filter (' + this.tagsFilter.length + ')';
        }
        this.render();
        
      }.bind(this));

    }

    switchSubmitFilterBtn() {
      if (this.tagsFilter.length > 0) {
        Array.from(this.submitFilter).forEach(function(btn){
          btn.classList.remove('hide');
          btn.text = 'submit filter (' + this.tagsFilter.length + ')';
        }, this);
        
      }else{
        Array.from(this.submitFilter).forEach(function(btn){
          btn.classList.add('hide');
        }, this);
      }
    }

    scrollToTop() {
      let scrollHeight = this.productsContainer.offsetTop;
      // if(window.innerWidth <= 768) {
      //   scrollDiv = scrollDiv - 100;
      // }
      
      window.scrollTo({ top: scrollHeight - 200, behavior: 'smooth'});
      
    }
}
customElements.define('collection-products', CollectionProduct);