export const PostCategoryHandler = {
    activeCategory: -1,
    categoryList: [],
    articles: [],

    init: function () {

        let categoryElement = document.querySelector('.js-post-category');
        let blogPagination = categoryElement.querySelector('.t-blog__footer')
        this.categoryList = categoryElement.querySelectorAll('.c-post-category__item');
        this.articles = document.querySelectorAll('.js-post-article')

        this.toggleTab();

        this.categoryList.forEach(item => {
            item.addEventListener('click', () => {
                this.activeCategory = parseInt(item.dataset.categoryId)
                this.toggleTab();
            })
        })
    },

    toggleTab: function () {

        this.categoryList.forEach((category)=>{
            category.classList.remove('is-active')
        })
        if(this.activeCategory !== -1) {
            this.categoryList[this.activeCategory].classList.add('is-active')
        }else{
            this.categoryList[this.categoryList.length -1].classList.add('is-active')
        }

        this.articles.forEach(article => {
            if(this.activeCategory === -1){
                article.classList.add('is-active')
                return
            }
            if(parseInt(article.dataset.postCategoryId) === parseInt(this.activeCategory)){
                article.classList.add('is-active')
            }else{
                article.classList.remove('is-active')
            }
        })
    }
}