Filter

import {debounce} from 'throttle-debounce';

import Component from '../../component/component';

import './filter.scss';

export interface IFilterSettings {
    itemSelector?: string;
    listSelector?: string;
    navBtnLeftSelector?: string;
    navBtnRightSelector?: string;
    scrollSpeed?: number,
    scrollStep?: number;
    selectedClass?: string;
}

export const profileSettings: IFilterSettings = {
    itemSelector: '.js-filter-item',
    listSelector: '.filter__list',
    navBtnLeftSelector: '.filter__button--left',
    navBtnRightSelector: '.filter__button--right',
    scrollSpeed: 50,
    scrollStep: 10,
    selectedClass: 'is-selected',
};

export default class Filter extends Component {
    static initSelector: string = '.js-filter';

    readonly debounceUpdate: debounce<() => void>;

    items: JQuery<HTMLElement>;
    list: JQuery<HTMLElement>;
    navBtnLeft: JQuery<HTMLElement>;
    navBtnRight: JQuery<HTMLElement>;
    scrollAmount: number;
    settings: IFilterSettings;

    constructor(target: HTMLElement) {
        super(target);

        this.settings = profileSettings;
        this.scrollAmount = 0;

        this.items = this.element.find(this.settings.itemSelector);
        this.list = this.element.find(this.settings.listSelector);

        this.navBtnLeft = this.element.find(this.settings.navBtnLeftSelector);
        this.navBtnRight = this.element.find(this.settings.navBtnRightSelector);

        this.items.on('click', this.onItemClick.bind(this));

        this.navBtnLeft.on('click', this.scroll.bind(this, 'left'));
        this.navBtnRight.on('click', this.scroll.bind(this, 'right'));

        this.checkForOverflow();

        this.debounceUpdate = debounce(100, this.checkForOverflow.bind(this));

        $(window).on('resize', this.debounceUpdate);

        this.list.on('scroll', this.checkForOverflow.bind(this));
    }

    checkForOverflow(): void {
        const frameWidth: number = this.list.width(); // width of div showed on display
        const scrollElmtWidth: number = this.list[0].scrollWidth; // width of div including hidden part
        const maxDistance: number = Math.floor(scrollElmtWidth - frameWidth);
        const scrollLeft: number = this.list.scrollLeft();

        if (maxDistance <= 0) {
            // Hide both buttons if no scroll available
            this.navBtnRight.addClass('is-hidden');
            this.navBtnLeft.addClass('is-hidden');
        } else {
            // Show both buttons if there is scroll available
            this.navBtnRight.removeClass('is-hidden');
            this.navBtnLeft.removeClass('is-hidden');

            // Hide the appropriate button(s) if the scroll has reached an end
            if (scrollLeft >= maxDistance) {
                this.navBtnRight.addClass('is-hidden');
            }
            if (scrollLeft <= 0) {
                this.navBtnLeft.addClass('is-hidden');
            }
        }
    }

    onItemClick(event: JQuery.ClickEvent): void {
        const target: JQuery = $(event.currentTarget);
        const targetKey: string = target.data('key');
        const isSelected: boolean = target.hasClass(this.settings.selectedClass);

        if (!isSelected) {
            target.addClass(this.settings.selectedClass);

            this.items.each((_index: number, item: HTMLElement) => {
                const $item: JQuery = $(item);
                const itemKey: string = $item.data('key');

                if (itemKey !== targetKey) {
                    $item.removeClass(this.settings.selectedClass);
                }
            });
        }
    }

    scroll(direction: 'right' | 'left'): void {
        const step: number = this.settings.scrollStep;
        let scroll: number = 0;

        const slideTimer: number = window.setInterval(() => {
            if (direction === 'left') {
                this.list.scrollLeft(this.list.scrollLeft() - step);
                this.scrollAmount = this.list.scrollLeft();
            } else {
                this.list.scrollLeft(this.list.scrollLeft() + step);
                this.scrollAmount = this.list.scrollLeft();
            }

            this.checkForOverflow();

            const maxDistance: number = Math.floor(this.list[0].scrollWidth - this.list.width());

            if (this.list.scrollLeft() === 0) {
                this.navBtnLeft.addClass('is-hidden');
            } else {
                this.navBtnLeft.removeClass('is-hidden');
            }
            if (this.list.scrollLeft() >= maxDistance) {
                this.navBtnRight.addClass('is-hidden');
            } else {
                this.navBtnRight.removeClass('is-hidden');
            }

            scroll += step;

            if (scroll >= 100) {
                window.clearInterval(slideTimer);
            }
        }, this.settings.scrollSpeed);
    }

}