import metadata from './utils/metadata';
import hammer from './utils/hammer';
import debounce from '../tools/debounce';
import {nextHandler, previousHandler, step} from './utils/moves';
import {onResizeThrottler} from '../tools/throttler';

const initializeDimensions = metadata => {
    resizeTitleHeights(metadata.com.titleList);
    adjustSlideWidth(metadata);
    metadata.wrapper.style.height = `${metadata.com.carousel.children[0].offsetHeight}px`;
};

const resizeTitleHeights = titleList => {
    const titleArray = Array.from(titleList);
    const titleHeights = titleArray.map(title => title.offsetHeight);
    const greatestTitleHeight = titleHeights.sort()[titleHeights.length - 1];

    titleArray.forEach(title => title.style.height = greatestTitleHeight + 'px');
};

const adjustSlideWidth = metadata => {
    metadata.slideWidth = window.innerWidth <= 1024
        ? metadata.gallery[0].children[0].children[0].width
        : window.innerWidth / metadata.numberOfSlides;
    step(metadata, 0);
};

const addEventListeners = carouselData => {
    const {com} = carouselData;

    com.leftArrow.addEventListener('click', debounce(150, () => previousHandler(carouselData)));
    com.rightArrow.addEventListener('click', debounce(150, () => nextHandler(carouselData)));
};

const initialize = metadata => {
    metadata.com.carousel.children[metadata.active].classList.add('active');
    addEventListeners(metadata);
    hammer(metadata);
    initializeDimensions(metadata);
    onResizeThrottler(() => initializeDimensions(metadata), 500);
};

export default element => initialize(metadata(element));