/**
 * External dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Label from '@woocommerce/base-components/label';

/**
 * Internal dependencies
 */
import { getIndexes } from './utils.js';
import './style.scss';

const Pagination = ( {
	currentPage,
	displayFirstAndLastPages,
	displayNextAndPreviousArrows,
	pagesToDisplay,
	onPageChange,
	totalPages,
} ) => {
	let { minIndex, maxIndex } = getIndexes(
		pagesToDisplay,
		currentPage,
		totalPages
	);
	const showFirstPage = displayFirstAndLastPages && Boolean( minIndex !== 1 );
	const showLastPage =
		displayFirstAndLastPages && Boolean( maxIndex !== totalPages );
	const showFirstPageEllipsis =
		displayFirstAndLastPages && Boolean( minIndex > 3 );
	const showLastPageEllipsis =
		displayFirstAndLastPages && Boolean( maxIndex < totalPages - 2 );

	// Handle the cases where there would be an ellipsis replacing one single page
	if ( showFirstPage && minIndex === 3 ) {
		minIndex = minIndex - 1;
	}
	if ( showLastPage && maxIndex === totalPages - 2 ) {
		maxIndex = maxIndex + 1;
	}

	const pages = [];
	if ( minIndex && maxIndex ) {
		for ( let i = minIndex; i <= maxIndex; i++ ) {
			pages.push( i );
		}
	}

	return (
		<div className="wc-block-pagination wc-block-components-pagination">
			<Label
				screenReaderLabel={ __(
					'Navigate to another page',
					'woocommerce'
				) }
			/>
			{ displayNextAndPreviousArrows && (
				<button
					className="wc-block-pagination-page wc-block-components-pagination__page"
					onClick={ () => onPageChange( currentPage - 1 ) }
					title={ __(
						'Previous page',
						'woocommerce'
					) }
					disabled={ currentPage <= 1 }
				>
					<Label
						label="<"
						screenReaderLabel={ __(
							'Previous page',
							'woocommerce'
						) }
					/>
				</button>
			) }
			{ showFirstPage && (
				<button
					className={ classNames(
						'wc-block-pagination-page',
						'wc-block-components-pagination__page',
						{
							'wc-block-pagination-page--active':
								currentPage === 1,
							'wc-block-components-pagination__page--active':
								currentPage === 1,
						}
					) }
					onClick={ () => onPageChange( 1 ) }
					disabled={ currentPage === 1 }
				>
					<Label
						label={ 1 }
						screenReaderLabel={ sprintf(
							/* translators: %d is the page number (1, 2, 3...). */
							__( 'Page %d', 'woocommerce' ),
							1
						) }
					/>
				</button>
			) }
			{ showFirstPageEllipsis && (
				<span
					className="wc-block-pagination-ellipsis wc-block-components-pagination__ellipsis"
					aria-hidden="true"
				>
					{ __( '…', 'woocommerce' ) }
				</span>
			) }
			{ pages.map( ( page ) => {
				return (
					<button
						key={ page }
						className={ classNames(
							'wc-block-pagination-page',
							'wc-block-components-pagination__page',
							{
								'wc-block-pagination-page--active':
									currentPage === page,
								'wc-block-components-pagination__page--active':
									currentPage === page,
							}
						) }
						onClick={
							currentPage === page
								? null
								: () => onPageChange( page )
						}
						disabled={ currentPage === page }
					>
						<Label
							label={ page }
							screenReaderLabel={ sprintf(
								/* translators: %d is the page number (1, 2, 3...). */
								__( 'Page %d', 'woocommerce' ),
								page
							) }
						/>
					</button>
				);
			} ) }
			{ showLastPageEllipsis && (
				<span
					className="wc-block-pagination-ellipsis wc-block-components-pagination__ellipsis"
					aria-hidden="true"
				>
					{ __( '…', 'woocommerce' ) }
				</span>
			) }
			{ showLastPage && (
				<button
					className={ classNames(
						'wc-block-pagination-page',
						'wc-block-components-pagination__page',
						{
							'wc-block-pagination-page--active':
								currentPage === totalPages,
							'wc-block-components-pagination__page--active':
								currentPage === totalPages,
						}
					) }
					onClick={ () => onPageChange( totalPages ) }
					disabled={ currentPage === totalPages }
				>
					<Label
						label={ totalPages }
						screenReaderLabel={ sprintf(
							/* translators: %d is the page number (1, 2, 3...). */
							__( 'Page %d', 'woocommerce' ),
							totalPages
						) }
					/>
				</button>
			) }
			{ displayNextAndPreviousArrows && (
				<button
					className="wc-block-pagination-page wc-block-components-pagination__page"
					onClick={ () => onPageChange( currentPage + 1 ) }
					title={ __( 'Next page', 'woocommerce' ) }
					disabled={ currentPage >= totalPages }
				>
					<Label
						label=">"
						screenReaderLabel={ __(
							'Next page',
							'woocommerce'
						) }
					/>
				</button>
			) }
		</div>
	);
};

Pagination.propTypes = {
	/**
	 * Number of the page currently being displayed.
	 */
	currentPage: PropTypes.number.isRequired,
	/**
	 * Total number of pages.
	 */
	totalPages: PropTypes.number.isRequired,
	/**
	 * Displays first and last pages if they are not in the current range of pages displayed.
	 */
	displayFirstAndLastPages: PropTypes.bool,
	/**
	 * Displays arrows to navigate to the previous and next pages.
	 */
	displayNextAndPreviousArrows: PropTypes.bool,
	/**
	 * Callback function called when the user triggers a page change.
	 */
	onPageChange: PropTypes.func,
	/**
	 * Number of pages to display at the same time, including the active page
	 * and the pages displayed before and after it. It doesn't include the first
	 * and last pages.
	 */
	pagesToDisplay: PropTypes.number,
};

Pagination.defaultProps = {
	displayFirstAndLastPages: true,
	displayNextAndPreviousArrows: true,
	pagesToDisplay: 3,
};

export default Pagination;
{"id":5660,"date":"2022-02-09T07:03:40","date_gmt":"2022-02-09T07:03:40","guid":{"rendered":"http:\/\/sexshop-xxxl.nl\/?product=lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser"},"modified":"2022-04-08T21:06:30","modified_gmt":"2022-04-08T21:06:30","slug":"lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser","status":"publish","type":"product","link":"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/","title":{"rendered":"LELO TANTRA veer, paars &#8211; zacht en decadent gevoel met donsveren &#8211; veer-teaser"},"content":{"rendered":"<p><!-- show up to 2 reviews by default --><br \/>\nVeerpenseel<br \/>\n<div class=\"main-cross-sell\" data-asin=\"B00413ZM1E\">\n\n\t<div class=\"WooZone-cross-sell-loader\">\n\t\t<div>\n\t\t\t<div id=\"floatingBarsG\">\n\t\t\t\t<div class=\"blockG\" id=\"rotateG_01\"><\/div>\n\t\t\t\t<div class=\"blockG\" id=\"rotateG_02\"><\/div>\n\t\t\t\t<div class=\"blockG\" id=\"rotateG_03\"><\/div>\n\t\t\t\t<div class=\"blockG\" id=\"rotateG_04\"><\/div>\n\t\t\t\t<div class=\"blockG\" id=\"rotateG_05\"><\/div>\n\t\t\t\t<div class=\"blockG\" id=\"rotateG_06\"><\/div>\n\t\t\t\t<div class=\"blockG\" id=\"rotateG_07\"><\/div>\n\t\t\t\t<div class=\"blockG\" id=\"rotateG_08\"><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"WooZone-cross-sell-loader-text\"><\/div>\n\t\t<\/div>\n\t<\/div>\n\n\t\t\n<\/div>\n<div style=\"clear:both;\"><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Veerpenseel<\/p>\n","protected":false},"featured_media":5665,"comment_status":"open","ping_status":"closed","template":"","meta":[],"product_cat":[621,715,739],"product_tag":[],"class_list":{"0":"post-5660","1":"product","2":"type-product","3":"status-publish","4":"has-post-thumbnail","6":"product_cat-gezondheid-and-persoonlijke-verzorging","7":"product_cat-spanking-and-teasing","8":"product_cat-teasers","9":"pa_brand-merk-lelo","11":"first","12":"instock","13":"shipping-taxable","14":"product-type-external"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>LELO TANTRA veer, paars - zacht en decadent gevoel met donsveren - veer-teaser - Sexshop-xxxl.nl<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LELO TANTRA veer, paars - zacht en decadent gevoel met donsveren - veer-teaser - Sexshop-xxxl.nl\" \/>\n<meta property=\"og:description\" content=\"Veerpenseel\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/\" \/>\n<meta property=\"og:site_name\" content=\"Sexshop-xxxl.nl\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-08T21:06:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/m.media-amazon.com\/images\/I\/31GhAU2d8oL.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"299\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/\",\"url\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/\",\"name\":\"LELO TANTRA veer, paars - zacht en decadent gevoel met donsveren - veer-teaser - Sexshop-xxxl.nl\",\"isPartOf\":{\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/m.media-amazon.com\/images\/I\/31GhAU2d8oL.jpg\",\"datePublished\":\"2022-02-09T07:03:40+00:00\",\"dateModified\":\"2022-04-08T21:06:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/#breadcrumb\"},\"inLanguage\":\"nl\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl\",\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/#primaryimage\",\"url\":\"https:\/\/m.media-amazon.com\/images\/I\/31GhAU2d8oL.jpg\",\"contentUrl\":\"https:\/\/m.media-amazon.com\/images\/I\/31GhAU2d8oL.jpg\",\"width\":299,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.sexshop-xxxl.nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shop\",\"item\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"LELO TANTRA veer, paars &#8211; zacht en decadent gevoel met donsveren &#8211; veer-teaser\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/#website\",\"url\":\"https:\/\/www.sexshop-xxxl.nl\/\",\"name\":\"Sexshop-xxxl.nl\",\"description\":\"Koop de bestverkochte deals tegen lage kosten en bespaar tijd en geld\",\"publisher\":{\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sexshop-xxxl.nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/#organization\",\"name\":\"Sexshop-xxxl.nl\",\"url\":\"https:\/\/www.sexshop-xxxl.nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl\",\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.sexshop-xxxl.nl\/wp-content\/uploads\/2022\/02\/SexShop-xxxl-logo.png\",\"contentUrl\":\"https:\/\/www.sexshop-xxxl.nl\/wp-content\/uploads\/2022\/02\/SexShop-xxxl-logo.png\",\"width\":250,\"height\":65,\"caption\":\"Sexshop-xxxl.nl\"},\"image\":{\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"LELO TANTRA veer, paars - zacht en decadent gevoel met donsveren - veer-teaser - Sexshop-xxxl.nl","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/","og_locale":"nl_NL","og_type":"article","og_title":"LELO TANTRA veer, paars - zacht en decadent gevoel met donsveren - veer-teaser - Sexshop-xxxl.nl","og_description":"Veerpenseel","og_url":"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/","og_site_name":"Sexshop-xxxl.nl","article_modified_time":"2022-04-08T21:06:30+00:00","og_image":[{"width":299,"height":500,"url":"https:\/\/m.media-amazon.com\/images\/I\/31GhAU2d8oL.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/","url":"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/","name":"LELO TANTRA veer, paars - zacht en decadent gevoel met donsveren - veer-teaser - Sexshop-xxxl.nl","isPartOf":{"@id":"https:\/\/www.sexshop-xxxl.nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/#primaryimage"},"image":{"@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/#primaryimage"},"thumbnailUrl":"https:\/\/m.media-amazon.com\/images\/I\/31GhAU2d8oL.jpg","datePublished":"2022-02-09T07:03:40+00:00","dateModified":"2022-04-08T21:06:30+00:00","breadcrumb":{"@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/#breadcrumb"},"inLanguage":"nl","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/"]}]},{"@type":"ImageObject","inLanguage":"nl","@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/#primaryimage","url":"https:\/\/m.media-amazon.com\/images\/I\/31GhAU2d8oL.jpg","contentUrl":"https:\/\/m.media-amazon.com\/images\/I\/31GhAU2d8oL.jpg","width":299,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/spanking-and-teasing\/teasers\/lelo-tantra-veer-paars-zacht-en-decadent-gevoel-met-donsveren-veer-teaser\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sexshop-xxxl.nl\/"},{"@type":"ListItem","position":2,"name":"Shop","item":"https:\/\/www.sexshop-xxxl.nl\/shop\/"},{"@type":"ListItem","position":3,"name":"LELO TANTRA veer, paars &#8211; zacht en decadent gevoel met donsveren &#8211; veer-teaser"}]},{"@type":"WebSite","@id":"https:\/\/www.sexshop-xxxl.nl\/#website","url":"https:\/\/www.sexshop-xxxl.nl\/","name":"Sexshop-xxxl.nl","description":"Koop de bestverkochte deals tegen lage kosten en bespaar tijd en geld","publisher":{"@id":"https:\/\/www.sexshop-xxxl.nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sexshop-xxxl.nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl"},{"@type":"Organization","@id":"https:\/\/www.sexshop-xxxl.nl\/#organization","name":"Sexshop-xxxl.nl","url":"https:\/\/www.sexshop-xxxl.nl\/","logo":{"@type":"ImageObject","inLanguage":"nl","@id":"https:\/\/www.sexshop-xxxl.nl\/#\/schema\/logo\/image\/","url":"https:\/\/www.sexshop-xxxl.nl\/wp-content\/uploads\/2022\/02\/SexShop-xxxl-logo.png","contentUrl":"https:\/\/www.sexshop-xxxl.nl\/wp-content\/uploads\/2022\/02\/SexShop-xxxl-logo.png","width":250,"height":65,"caption":"Sexshop-xxxl.nl"},"image":{"@id":"https:\/\/www.sexshop-xxxl.nl\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/product\/5660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/product"}],"about":[{"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/types\/product"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/comments?post=5660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/media\/5665"}],"wp:attachment":[{"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/media?parent=5660"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/product_cat?post=5660"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/product_tag?post=5660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}