/*
    Отображение двойных карточек в сетках
 */

class x2Cards {
    constructor(config) {
        let defaultConfig = {
            element: null,                  // элемент с результатами
            selector: '#mse2_results',
            selectorItems: '.product-n',
            x2Class: 'product-n__item-x2'
        }

        this.config = Object.assign(defaultConfig, config)

        // блок-обёртка карточек
        if(this.config.element) {
            this.resultsEl = this.config.element
        } else {
            this.resultsEl = document.querySelector(this.config.selector)
        }

        // карточки
        this.itemsEls = []
        if(this.resultsEl) {
            this.itemsEls = this.resultsEl.querySelectorAll(this.config.selectorItems)
        }
    }

    // преобразование карточек
    action() {
        let countCardsInRow = this.getCountCardsInRow()

        let position = 0
        let table = {}

        let idx = 0
        let rows = 1
        for(let item of this.itemsEls) {
            position++

            if(position > countCardsInRow) {
                position = 1
                rows++
            }

            let x2 = parseInt(item.getAttribute('data-x2'))

            let data = {
                rows: rows,
                position: position,
                x2: x2,
            }

            if(x2 == 0) {
                data.size = 1
            }

            if(x2 == 1) {
                if(position == countCardsInRow) {
                    data.size = 1
                } else {
                    data.size = 2
                    position++
                }
            }

            table[idx] = data

            idx++
        }

        //console.table(table)

        idx = 0
        for(let item of this.itemsEls) {
            if(table[idx].size == 2) {
                item.classList.add(this.config.x2Class)
            } else {
                item.classList.remove(this.config.x2Class)
            }

            // только страница категории
            if(this.config.selector == '#mse2_results') {
                if(table[idx].position == 1) {
                    item.classList.add('product-n--first-row')
                } else {
                    item.classList.remove('product-n--first-row')
                }

                if(table[idx].position == 2) {
                    item.classList.add('product-n--second-row')
                } else {
                    item.classList.remove('product-n--second-row')
                }
            }

            //console.log(table[idx])

            idx++
        }
    }

    // количество карточек в ряду
    getCountCardsInRow() {
        let count = 0       // счётчик карточек в ряду
        let top = 0         // отступ карточек сверху

        for(let item of this.itemsEls) {
            let offsetTop = item.getBoundingClientRect().top + document.body.scrollTop

            if(top === 0) {
                top = offsetTop
            }

            if(top !== offsetTop) {
                return count;
            }

            count++
        }
    }

    /**
     * Циклический перебор элементов массива
     * @param arr           - массив
     * @param startKey      - ключ стартовой позиции
     * @param count         - сколько элементов отсчитать от старта
     * @param dir           - направление, "next" - вперёд, "prev" - назад
     * @param callback()    - callback-функция
     * @returns {number}    - ключ элемента массива на котором остановились
     */
    arrayLoop(arr, startKey, count, dir = 'next', callback = () => {}) {
        let idx = startKey + 1

        if(dir == 'prev') {
            idx = startKey - 1
        }

        for(var i = 0; i <= count; i++) {
            if(typeof arr[idx] === 'undefined') {
                idx = 0

                if(dir == 'prev') {
                    idx = arr.length - 1
                }
            }

            //console.log(idx, i)
            callback(idx)

            if(i == count) {
                break
            }

            if(dir == 'next') {
                idx++
            } else {
                idx--
            }
        }

        return idx;
    }
}

/*

document.addEventListener("DOMContentLoaded", function(event) {
    console.log('x2Cards')

    function setX2Card() {
        let results = document.getElementById('mse2_results')
        let items = results.querySelectorAll('.product-n')

        for(let item of items) {
            let x2 = parseInt(item.getAttribute('data-x2'))

            if(x2 == 1) {
                item.classList.add('product-n__item-x2')
            }
        }
    }

    setX2Card()
    $(document).on('mse2_load', function (e, data) {
        setX2Card()
    });
})

*/