import { tpl } from './tabTpl';
const Tab = (($) => {
  const DefaultConfig = {
    
    node: document.querySelector('body'),
    
    size: 0,
    
    showContainer: true,
    selectedIndex: 0,
    beforeToggle: () => {
    },
    afterToggle: () => {
    },
  };
  class Tab {
    static getTransitionDurationFromElement(element) {
      if (!element) {
        return 0;
      }
      let transitionDuration = $(element).css('transition-duration');
      const floatTransitionDuration = Number.parseFloat(transitionDuration);
      if (!floatTransitionDuration) {
        return 0;
      }
      transitionDuration = transitionDuration.split(',')[0];
      return Number.parseFloat(transitionDuration) * 1000;
    }
    constructor(config) {
      this.config = $.extend(true, {}, DefaultConfig, config);
      this.renderModule();
      this.bindEvent();
    }
    renderModule() {
      const html = template.render(tpl, this.config);
      this.element = $(html);
      $(this.config.node).append(this.element);
      this.switch = this.element.find('.J-switch');
      this.tabsDefault = this.element.find('.J-tabsDefault');
      this.tabsContainer = this.element.find('.J-tabsContainer');
      this.tabPane = this.element.find('.J-tabPane');
      this.tabsScroll = this.tabsDefault.find('.J-tabsScroll');
      this.defaultItem = this.tabsDefault.find('.J-item');
      this.containerItem = this.tabsContainer.find('.J-item');
      this.index = this.config.selectedIndex;
      if (this.config.tabs.length < 2) {
        this.tabsDefault.hide();
      }
      this.renderContent();
      this.scrollTabs(this.index, this.config.tabs.length, this.config.size);
    }
    
    scrollTabs(index, total, size) {
      const offset = Math.round((size - 1) / 2);
      let left;
      if (total < size) {
        left = 0;
      } else if (index >= offset && index <= total - size + offset) {
        left = $(this.defaultItem[index - offset]).position().left;
      } else if (index > total - size + offset) {
        left = $(this.defaultItem[total - size]).position().left;
      }
      this.tabsScroll.css({
        left: -left,
      });
    }
    bindEvent() {
      
      this.element.on('click', '.J-switch', () => {
        this.switch.toggleClass('d-active');
        this.tabsContainer.toggleClass('d-active');
      });
      
      this.element.on('click', '.J-item', (event) => {
        const currentIndex = Number.parseInt(event.currentTarget.dataset.index, 10);
        if (this.index === currentIndex) {
          return false;
        }
        this.defaultItem[this.index].classList.remove('d-active');
        this.containerItem[this.index].classList.remove('d-active');
        this.tabPane[this.index].classList.remove('d-show', 'd-active');
        this.index = currentIndex;
        this.defaultItem[this.index].classList.add('d-active');
        this.containerItem[this.index].classList.add('d-active');
        this.tabPane[this.index].classList.add('d-active');
        this.renderContent();
        this.scrollTabs(this.index, this.config.tabs.length, this.config.size);
        if (this.switch.hasClass('d-active')) {
          this.switch.trigger('click');
        }
        const duration = Tab.getTransitionDurationFromElement(this.tabPane[this.index]);
        const timer = setTimeout(() => {
          this.tabPane[this.index].classList.add('d-show');
          this.config.afterToggle(this.index);
          clearTimeout(timer);
        }, duration);
      });
    }
    renderContent() {
      if (this.tabPane[this.index].dataset.rendered === 'false') {
        $(this.tabPane[this.index]).append(this.config.tabs[this.index].content);
        this.tabPane[this.index].dataset.rendered = 'true';
      }
    }
    
    dispose() {
    }
  }
  return Tab;
})($);
export default Tab;