const LITERALS = {
  closeModal: <iai:variable vid="Zamknij modal" />
};

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();
  }
  
}