const LITERALS = {
  reorder: <iai:variable vid="PONÓW ZAMÓWIENIE" />,
  errorOccured: <iai:variable vid="Wystąpił błąd" />,
  added: <iai:variable vid="Dodano" />,
  reorderLast: <iai:variable vid="Zamów to, co ostatnio" />,
  recentlyBoughtProducts: <iai:variable vid="Ostatnio kupowane produkty" />,
  mostBoughtProducts: <iai:variable vid="Najczęściej kupowane produkty" />,
  lastOrders: <iai:variable vid="Ostatnie zamówienia" />,
  closeModal: <iai:variable vid="Zamknij modal" />,
  searchPlaceholder: <iai:variable vid="Wpisz czego szukasz" />,
  yourLastOrder: <iai:variable vid="Twoje ostatnie zamówienie" />,
  orderId: <iai:variable vid="ID zamówienia" />,
  orderDate: <iai:variable vid="Data zamówienia" />,
  orderWorth: <iai:variable vid="Wartość zamówienia" />,
  productsCount: <iai:variable vid="Ilość produktów w zamówieniu" />,
  size: <iai:variable vid="Rozmiar" />,
  quantity: <iai:variable vid="Ilość" />,
  universal: <iai:variable vid="Uniwersalny" />,
  product: <iai:variable vid="produkt" />,
  products: <iai:variable vid="produkty" />,
  productsPlural: <iai:variable vid="produktów" />,
  showAllOrderProducts: <iai:variable vid="Pokaż wszystkie produkty z zamówienia" />,
  hideAllOrderProducts: <iai:variable vid="Ukryj wszystkie produkty z zamówienia" />,
  productOutOfStock: <iai:variable vid="Produkt niedostępny"/>,
  goNextStep: <iai:variable vid="Przejdź dalej"/>
};

class IdmTabsModal{
  constructor(config){
    const {title, tabs, cacheContainerSelector} = config;
    
    this.title = title;
    this.tabs = tabs;
    this.currentTabId = null;
    this.cacheContainer = document.querySelector(cacheContainerSelector);
    
    //before open container is cacheContainer
    this.container = this.cacheContainer;
    
    
    this.init();
  }
  
  
  getTabsButtonsHTML(){
    return this.tabs.map((tab, i) => `
      <button class="idm-tabs-modal__button" data-tab-id="${i}">${tab.name}</button>    
    `).join("");
  }
  
  updateActiveItemsHelper({selector, activeClass}){
    const items = this.container.querySelectorAll(selector);

    items.forEach(item => {
      const tabId = parseInt(item.dataset.tabId);
      const isActive = tabId === this.currentTabId;
      if(isActive){
        item.classList.add(activeClass);
        return;
      }
      item.classList.remove(activeClass);
      
    })
  }
  
  
  updateActiveButtons(){
    this.updateActiveItemsHelper({selector:".idm-tabs-modal__button", activeClass:"idm-tabs-modal__button--active"});
  }
  
  mountTabs(){
    const content = this.container.querySelector(".idm-tabs-modal__content");
    content.innerHTML = '';
  
    this.tabs.forEach((tab, i) => {
      const div = document.createElement('div');
      div.className = 'idm-tabs-modal__tab';
      div.dataset.tabId = i;
      div.innerHTML = tab.html;
  
      tab.ref = div;
  
      content.appendChild(div);
    });
  }
  
  updateActiveTabs(){
    this.updateActiveItemsHelper({selector:".idm-tabs-modal__tab", activeClass:"idm-tabs-modal__tab--active"});
  }
  
  async changeTab(tabId){
    this.currentTabId = tabId;
    this.updateActiveButtons();
    this.updateActiveTabs();
    
    const currentTab = this.tabs[tabId];
    const isInitialised = currentTab?.isInitialised;
    
    if(!isInitialised && typeof currentTab.onInit === 'function'){
      currentTab.isInitialised = true;
      await currentTab?.onInit(currentTab.ref, this);
    }
    
  }
  
  initTabButtonsEvents(){
    const buttons = this.container.querySelectorAll(".idm-tabs-modal__button");
    
    buttons.forEach(button => button.addEventListener("click", (e) => {
      e.preventDefault();
      e.stopPropagation();
      const tabId = parseInt(button.dataset.tabId);
      this.changeTab(tabId);
    }));
  }
  
  
  initButtonsEvents(){
    this.initTabButtonsEvents();
  }
  
  
  getModalHTML(){
    return `
<div class="idm-tabs-modal__wrapper">
  <div class="idm-tabs-modal__heading">
    <div class="idm-tabs-modal__title-wrapper">
    <h2 class="idm-tabs-modal__title">${this.title}</h2>
    <button class="modal__close idm-tabs-modal__close-button" aria-label="${LITERALS.closeModal}">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M12 13.4L7.10005 18.3C6.91672 18.4834 6.68338 18.575 6.40005 18.575C6.11672 18.575 5.88338 18.4834 5.70005 18.3C5.51672 18.1167 5.42505 17.8834 5.42505 17.6C5.42505 17.3167 5.51672 17.0834 5.70005 16.9L10.6 12L5.70005 7.10005C5.51672 6.91672 5.42505 6.68338 5.42505 6.40005C5.42505 6.11672 5.51672 5.88338 5.70005 5.70005C5.88338 5.51672 6.11672 5.42505 6.40005 5.42505C6.68338 5.42505 6.91672 5.51672 7.10005 5.70005L12 10.6L16.9 5.70005C17.0834 5.51672 17.3167 5.42505 17.6 5.42505C17.8834 5.42505 18.1167 5.51672 18.3 5.70005C18.4834 5.88338 18.575 6.11672 18.575 6.40005C18.575 6.68338 18.4834 6.91672 18.3 7.10005L13.4 12L18.3 16.9C18.4834 17.0834 18.575 17.3167 18.575 17.6C18.575 17.8834 18.4834 18.1167 18.3 18.3C18.1167 18.4834 17.8834 18.575 17.6 18.575C17.3167 18.575 17.0834 18.4834 16.9 18.3L12 13.4Z" fill="#111111"/>
      </svg>
    </button>
  </div>
  
    <div class="idm-tabs-modal__buttons">
        ${this.getTabsButtonsHTML()}
    </div>
  </div>
  <div class="idm-tabs-modal__content"></div>
</div>

    
    `
  }
  
  
  // render modal in cache container
  initModal(){
    const html = this.getModalHTML();
    this.cacheContainer.innerHTML = html;
    
    // this.modal = new Modal({html , classList:"idm-tabs-modal", afterShow: (modal)=>this.container=modal});
  }
  
  show(){
    const element = this.cacheContainer.querySelector(".idm-tabs-modal__wrapper");
    this.modal = new Modal({element , classList:"idm-tabs-modal", afterShow: (modal)=>this.container=modal});
  }
  
  initButtons(){
    this.updateActiveButtons();
    this.initButtonsEvents();
  }
  
  initTabs(){
    this.mountTabs();
    this.changeTab(0);
  }
  
  init(){
    this.initModal();
    this.initButtons();
    this.initTabs();
  }
  
}