/*
    Author: Kevin Saquing
    Filename: 'pagination.js'
    Description: 
*/

;(function($) {
	"use strict"
  
	B2C.pagination = {
	  init: function(args) {
		this._defaults = {
		  itemsTotal: 31, // total of the items
		  itemsPerPage: 2, // visible items per page
		  visiblePagination: 5, // number of visible pagination. if ellipsis is true, this will not include the fist and last page
		  currentPage: 1, // current active pagination
		  element: ".js-pagination", // element where the append will happened
		  gotoFirstText:
			'<img src="https://prep-community.musictribe.com/html/assets/pagination_arrow-first.png" />',
		  gotoPrevText:
			'<img src="https://prep-community.musictribe.com/html/assets/pagination_arrow-prev.png" /> <span>Prev</span>',
		  gotoNextText:
			'<span>Next</span> <img src="https://prep-community.musictribe.com/html/assets/pagination_arrow-next.png" />',
		  gotoLastText:
			'<img src="https://prep-community.musictribe.com/html/assets/pagination_arrow-last.png" />',
		  ellipsis: false,
		  enableJumpTo: true
		}
  
		this._constructor = $.extend(this._defaults, args)
  
		//   console.log(this._constructor)
  
		if (!$(this._constructor.element).length) return
  
		this.displayPagination()
		this.events()
  
		if (this._constructor.enableJumpTo) {
		  this.jump()
		}
	  },
  
	  displayPagination: function() {
		var _self = this
		var _constructor = _self._constructor
		// empty the element
		$(_constructor.element).empty()
		// get the total pagination
		this._constructor.paginationsTotal = Math.ceil(
		  _constructor.itemsTotal / _constructor.itemsPerPage
		)
		// set the expected last page
		_constructor.expectedLastPage =
		  _constructor.currentPage + (_constructor.visiblePagination - 1)
  
		if (
		  _constructor.currentPage + (_constructor.visiblePagination - 1) >
			_constructor.paginationsTotal ||
		  _constructor.currentPage == _constructor.paginationsTotal
		) {
		  _constructor.start =
			_constructor.currentPage -
			Math.max(
			  0,
			  _constructor.expectedLastPage - _constructor.paginationsTotal
			)
  
		  _constructor.end =
			_constructor.start + _constructor.visiblePagination >
			_constructor.expectedLastPage
			  ? _constructor.paginationsTotal
			  : _constructor.start + (_constructor.visiblePagination - 1)
  
		  if (
			_constructor.start + _constructor.visiblePagination >
			_constructor.expectedLastPage
		  ) {
			_constructor.start =
			  _constructor.end - (_constructor.visiblePagination - 1)
		  }
		} else {
		  _constructor.start = _constructor.currentPage
		  _constructor.end =
			_constructor.start + _constructor.visiblePagination - 1
		}
  
		// keep the max of pagination to the total number
		if (_constructor.currentPage > _constructor.paginationsTotal) {
		  _constructor.currentPage = _constructor.paginationsTotal
		  _constructor.start = _constructor.ellipsis
			? _constructor.start - 1
			: _constructor.start
		}
  
		// keep the min of pagination to the 1
		if (_constructor.currentPage < 1) {
		  _constructor.currentPage = 1
		}
  
		// if the ellipsis is true
		if (_constructor.ellipsis) {
		  if (
			_constructor.currentPage == 1 &&
			_constructor.paginationsTotal > _constructor.end
		  ) {
			_constructor.end++
		  }
		  if (
			_constructor.paginationsTotal ==
			(_constructor.end || _constructor.currentPage)
		  ) {
			_constructor.start--
		  }
		}
  
		// keep the min of pagination to the 1
		if (_constructor.start < 1) {
		  _constructor.start = 1
		}
  
		for (
		  var pagination = _constructor.start;
		  pagination <= _constructor.end;
		  pagination++
		) {
		  // if ellipsis is true
		  // means we dont need to display the first and last page
		  if (_constructor.ellipsis) {
			if (pagination == 1 || pagination == _constructor.paginationsTotal) {
			  continue
			}
		  }
  
		  if (pagination == _constructor.currentPage) {
			$(_constructor.element).append(
			  _self.template({
				pageNumber: pagination,
				classNames: "is-active"
			  })
			)
		  } else {
			$(_constructor.element).append(
			  _self.template({
				pageNumber: pagination
			  })
			)
		  }
		}
  
		this.displayPaginationControls()
	  },
  
	  displayPaginationControls: function() {
		var _constructor = this._constructor
		if (_constructor.ellipsis) {
		  // insert the ellipsis
		  $(this._constructor.element).prepend(
			this.template({
			  text: ". . .",
			  pageNumber: null,
			  classNames: _constructor.start < 3 ? "is-hidden" : "has-ellipsis"
			})
		  )
		  // insert the first
		  $(this._constructor.element).prepend(
			this.template({
			  text: 1,
			  pageNumber: 1,
			  classNames: _constructor.currentPage == 1 ? "is-active" : null
			})
		  )
		  // insert the prev
		  $(_constructor.element).prepend(
			this.template({
			  text: _constructor.gotoPrevText,
			  pageNumber: "prev",
			  classNames: _constructor.currentPage == 1 ? "is-disabled" : null
			})
		  )
		  // insert the ellipsis
		  $(this._constructor.element).append(
			this.template({
			  text: ". . .",
			  pageNumber: null,
			  classNames:
				_constructor.end >= _constructor.paginationsTotal - 1
				  ? "is-hidden"
				  : "has-ellipsis"
			})
		  )
		  if (this._constructor.paginationsTotal > 1) {
			// insert the last
			$(this._constructor.element).append(
			  this.template({
				text: _constructor.paginationsTotal,
				pageNumber: _constructor.paginationsTotal,
				classNames:
				  _constructor.currentPage == _constructor.paginationsTotal
					? "is-active"
					: null
			  })
			)
		  }
		  // insert the next
		  $(this._constructor.element).append(
			this.template({
			  text: this._constructor.gotoNextText,
			  pageNumber: "next",
			  classNames:
				_constructor.currentPage >= _constructor.paginationsTotal
				  ? "is-disabled"
				  : null
			})
		  )
		} else {
		  // insert the prev
		  $(_constructor.element).prepend(
			this.template({
			  text: _constructor.gotoPrevText,
			  pageNumber: "prev",
			  classNames: _constructor.currentPage == 1 ? "is-disabled" : null
			})
		  )
		  // insert the first
		  $(this._constructor.element).prepend(
			this.template({
			  text: this._constructor.gotoFirstText,
			  pageNumber: "first",
			  classNames: _constructor.currentPage == 1 ? "is-disabled" : null
			})
		  )
		  // insert the next
		  $(this._constructor.element).append(
			this.template({
			  text: this._constructor.gotoNextText,
			  pageNumber: "next",
			  classNames:
				_constructor.currentPage >= _constructor.paginationsTotal
				  ? "is-disabled"
				  : null
			})
		  )
		  // insert the last
		  $(this._constructor.element).append(
			this.template({
			  text: this._constructor.gotoLastText,
			  pageNumber: "last",
			  classNames:
				_constructor.currentPage >= _constructor.paginationsTotal
				  ? "is-disabled"
				  : null
			})
		  )
		}
  
		if (
		  _constructor.enableJumpTo &&
		  _constructor.paginationsTotal > _constructor.visiblePagination + 2
		) {
		  let template = `<form><input type="number" min="1" /><button type="submit"></button></form>`
  
		  $(this._constructor.element).append(template)
		}
	  },
  
	  paginate: function(pagination) {
		var _constructor = this._constructor
		var $parent = $(this._constructor.element)
		var controls = {
		  first: $parent.find('[data-pagination="first"]'),
		  prev: $parent.find('[data-pagination="prev"]'),
		  next: $parent.find('[data-pagination="next"]'),
		  last: $parent.find('[data-pagination="last"]')
		}
		switch (pagination) {
		  case "first":
			_constructor.currentPage = 1
			break
		  case "prev":
			if (_constructor.currentPage > 1) {
			  _constructor.currentPage--
			}
			break
		  case "next":
			if (
			  _constructor.currentPage <
			  Math.ceil(_constructor.itemsTotal / _constructor.itemsPerPage)
			) {
			  _constructor.currentPage++
			}
			break
		  case "last":
			_constructor.currentPage = Math.ceil(
			  _constructor.itemsTotal / _constructor.itemsPerPage
			)
			break
		  default:
			if (typeof pagination != "number") {
			  pagination = parseInt(pagination)
			  pagination = pagination < 1 ? 1 : pagination
			}
			_constructor.currentPage = pagination
		}
  
		if (_constructor.currentPage == _constructor.paginationsTotal) {
		  controls.next.addClass("is-disabled")
		  controls.last.addClass("is-disabled")
		  controls.first.removeClass("is-disabled")
		  controls.prev.removeClass("is-disabled")
		} else if (_constructor.currentPage == 1) {
		  controls.next.removeClass("is-disabled")
		  controls.last.removeClass("is-disabled")
		  controls.first.addClass("is-disabled")
		  controls.prev.addClass("is-disabled")
		} else {
		  controls.next.removeClass("is-disabled")
		  controls.last.removeClass("is-disabled")
		  controls.first.removeClass("is-disabled")
		  controls.prev.removeClass("is-disabled")
		}
  
		// render again if the page is not visible
		if (
		  _constructor.currentPage < _constructor.start ||
		  _constructor.currentPage > _constructor.end
		) {
		  $(_constructor.element).empty()
		  this.displayPagination()
		}
  
		this.onPaginate()
	  },
  
	  template: function(args) {
		// args.pageNumber is required
		if (args.classNames) {
		  return (
			'<li class="' +
			args.classNames +
			'" data-pagination="' +
			args.pageNumber +
			'"><a>' +
			(args.text == null ? args.pageNumber : args.text) +
			"</a></li>"
		  )
		} else {
		  return (
			'<li data-pagination="' +
			args.pageNumber +
			'"><a>' +
			(args.text == null ? args.pageNumber : args.text) +
			"</a></li>"
		  )
		}
	  },
  
	  events: function() {
		var _self = this
		var _constructor = _self._constructor
  
		$(_constructor.element).on("click", "li:not(.is-disabled)", function() {
		  var pagination = $(this).data("pagination")
  
		  if (pagination != null) {
			_self.paginate(pagination)
		  }
		})
	  },
  
	  onPaginate: function() {
		$(this._constructor.element)
		  .find("[data-pagination]")
		  .removeClass("is-active")
		$(this._constructor.element)
		  .find('[data-pagination="' + this._constructor.currentPage + '"]')
		  .addClass("is-active")
	  },
  
	  jump: function() {
		const self = this
		const _constructor = self._constructor
  
		$(_constructor.element).on("submit", "form", function(e) {
		  let value = $(_constructor.element)
			.find("input")
			.val()
			.trim()
		  e.preventDefault()
  
		  if (value > _constructor.paginationsTotal) {
			//   console.log("Me")
			value = _constructor.paginationsTotal
		  }
  
		  if (value != null && value != "" && value != undefined) {
			self.paginate(value)
		  }
  
		  $(_constructor.element)
			.find("input")
			.val(value)
			.focus()
		})
	  }
	}
  
	const defaultPagination = Object.create(B2C.pagination)
	const ellipsisPagination = Object.create(B2C.pagination)
	const catalogPagination = Object.create(B2C.pagination)
  
	defaultPagination.init({
	  visiblePagination: $(window).width() < 768 ? 2 : 3,
	  element: "#pagination1",
	  enableJumpTo: false
	})
  
	ellipsisPagination.init({
	  visiblePagination: $(window).width() < 768 ? 2 : 3,
	  element: "#pagination2",
	  visiblePagination: 5,
	  itemsTotal: 29,
	  ellipsis: true,
	  enableJumpTo: false,
	  gotoLastText: "",
	  gotoFirstText: "",
	  gotoPrevText:
		'<img src="https://prep-community.musictribe.com/html/assets/pagination_arrow-prev.png" />',
	  gotoNextText:
		'<img src="https://prep-community.musictribe.com/html/assets/pagination_arrow-next.png" />'
	})
  
	catalogPagination.init({
	  visiblePagination: $(window).width() < 768 ? 2 : 3,
	  element: "#pagination3",
	  ellipsis: true,
	  enableJumpTo: false,
	  visiblePagination: 2
	})
  })(jQuery)
  