Source: components/filter/filter-result/filter-result-element/pagination/product-pagination-load-previous.js

import jQ from "jquery";
import ProductPagination from "./product-pagination";
import Class from "../../../../../helpers/class";
import Labels from "../../../../../helpers/labels";
import Utils from "../../../../../helpers/utils";
import Selector from "../../../../../helpers/selector";
import Globals from "../../../../../helpers/globals";
import Settings from "../../../../../helpers/settings";
import FilterApi from "../../../../../api/filter-api";

/**
 * Product pagination - load previous
 * @extends ProductPagination
 */
class ProductPaginationLoadPrevious extends ProductPagination {
	/**
	 * @constructs
	 */
	constructor() {
		super();
		// Set previous button selector
		this.$wrapper = jQ(Selector.btnLoadPreviousPageWrapperSelector);
		this.$element = jQ(Selector.btnLoadPreviousPageSelector);
		// Extend more settings for this component
		jQ.extend(this.settings, {
			sessionStorageCurrentPreviousPage: Settings.getSettingValue('general.sessionStorageCurrentPreviousPage'),
			sessionStorageCurrentPage: Settings.getSettingValue('general.sessionStorageCurrentPage'),
			sessionStorageCurrentNextPage: Settings.getSettingValue('general.sessionStorageCurrentNextPage'),
			sessionStoragePreviousPageEvent: Settings.getSettingValue('general.sessionStoragePreviousPageEvent')
		});
	}

	/**
	 * Get te raw HTML template for pagination - load previous button
	 */
	getTemplate() {
		return `
			<div class="{{class.buttonLoadPreviousPageSelector}}">
				<a href="javascript:void(0)" aria-label="{{label.loadPreviousPage}}" class="js-{{class.buttonLoadPreviousPageSelector}}">{{label.loadPreviousPage}}</a>
			</div>
		`;
	}

	/**
	 * Replace the brackets in raw html template with proper values for load more
	 * @returns {String} HTML string
	 */
	compileTemplate() {
		return this.getTemplate()
			.replace(/{{class.buttonLoadPreviousPageSelector}}/g, Class.buttonLoadPreviousPageSelector)
			.replace(/{{label.loadPreviousPage}}/g, Labels.loadPreviousPage);
	}

	/**
	 * Returns whether or not the load previous page is rendered
	 */
	isRender() {
		return this.data && Utils.isLoadPreviousPagePaginationType() && this.parent.eventType != 'page';
	}

	/**
	 * Render pagination - default type
	 */
	render() {
		// Build load previous template: if the previous button does not exist, build it
		if (!this.$element.length) {
			this.$element = jQ(this.compileTemplate());
			this.$wrapper.html(this.$element);
		}
		// Get total page
		var totalPage = Math.ceil(this.totalProduct / Globals.queryParams.limit);
		// Get current page
		var currentPage = Globals.queryParams.page;
		/**
		 * If the current page is not first page and the eventType is not 'page'
		 * => Show load previous button and save previous page data to the sessionStorage
		 */
		var isShowPreviousBtn = (totalPage > 1 && currentPage > 1) ? true : false;
		// Storge the current previous page number, will be updated when press load previous button
		window.sessionStorage.setItem(this.settings.sessionStorageCurrentPreviousPage, currentPage);
		// Storge the current page number
		window.sessionStorage.setItem(this.settings.sessionStorageCurrentPage, currentPage);
		// Storge the current next page number, will be updated when press load more button
		window.sessionStorage.setItem(this.settings.sessionStorageCurrentNextPage, currentPage);
		// Storge the load previous page event status 
		window.sessionStorage.setItem(this.settings.sessionStoragePreviousPageEvent, 1);
		// Show the load previous button or not
		if (isShowPreviousBtn) {
			this.$wrapper.show();
		} else {
			this.$wrapper.hide();
		}
	}

	/**
	 * Returns whether not bind the event on load previous button
	 */
	isBindEvents() {
		return Utils.isLoadPreviousPagePaginationType();
	}
	
	/**
	 * Bind the event on the pagination - load more
	 */
	bindEvents() {
		// Clear all click event on load previous button
		this.$element.unbind('click');
		// Bind click event for load previous button
		this.$element.on('click', this._onClickEvent.bind(this));
	}

	_onClickEvent(event) {
		event.preventDefault();
		// Get current page
		var currentPage = Globals.queryParams.page;
		/**
		 * Get the current previous page
		 * - If the current previous page have not been set yet, use the current page in Globals
		 */
		if (window.sessionStorage.getItem(this.settings.sessionStorageCurrentPreviousPage) !== null) {
			this.currentPreviousPage = parseInt(window.sessionStorage.getItem(this.settings.sessionStorageCurrentPreviousPage));
		} else {
			this.currentPreviousPage = currentPage;
		}
		// If the current previous page is the first page => hide the load previous button, else execute the load previous event
		if (this.currentPreviousPage < 2) {
			this.$wrapper.hide();
			return false
		} else {
			Globals.internalClick = true;
			// Set limit param
			FilterApi.setParam('limit', this.settings.limit);
			// Update new current previous page number
			this.currentPreviousPage--;
			window.sessionStorage.setItem(this.settings.sessionStorageCurrentPreviousPage, this.currentPreviousPage);
			window.sessionStorage.setItem(this.settings.sessionStoragePreviousPageEvent, 1);
			// Update new page param for filter request
			FilterApi.setParam('page', this.currentPreviousPage);
			// Apply filter
			FilterApi.applyFilter('page');
			// Hide the load previous button if return to first page
			if (this.currentPreviousPage < 2) {
				this.$wrapper.hide();
			}
		}
	}
}

export default ProductPaginationLoadPrevious;