/**
 * 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":6074,"date":"2022-02-09T07:16:03","date_gmt":"2022-02-09T07:16:03","guid":{"rendered":"http:\/\/sexshop-xxxl.nl\/?product=durex-gevoelsecht-515-g-natural-29-w-34-l"},"modified":"2022-04-08T21:19:01","modified_gmt":"2022-04-08T21:19:01","slug":"durex-gevoelsecht-515-g-natural-29-w-34-l","status":"publish","type":"product","link":"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/","title":{"rendered":"Durex Gevoelsecht, 515 g Natural 29 W\/34 l"},"content":{"rendered":"<p><!-- show up to 2 reviews by default -->                   <\/p>\n<p> <span>Met Durex-condooms is de bescherming een vanzelfsprekendheid \u2013 plezier, opwinding en plezier zijn nu trendy. Van flirt tot zacht intiem liefdesspel tot raunchige passie \u2013 wanneer Durex involveerd is \u2013 is de ervaring veel aangenamer.<\/span>  <\/p>\n<p>item_display_gewicht; 0,515 kilogram<br \/>\n<div class=\"main-cross-sell\" data-asin=\"B081X5W62J\">\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>item_display_gewicht; 0,515 kilogram<\/p>\n","protected":false},"featured_media":6096,"comment_status":"open","ping_status":"closed","template":"","meta":[],"product_cat":[621],"product_tag":[],"class_list":{"0":"post-6074","1":"product","2":"type-product","3":"status-publish","4":"has-post-thumbnail","6":"product_cat-gezondheid-and-persoonlijke-verzorging","7":"pa_brand-merk-durex","9":"first","10":"instock","11":"shipping-taxable","12":"product-type-external"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Durex Gevoelsecht, 515 g Natural 29 W\/34 l - 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\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Durex Gevoelsecht, 515 g Natural 29 W\/34 l - Sexshop-xxxl.nl\" \/>\n<meta property=\"og:description\" content=\"item_display_gewicht; 0,515 kilogram\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/\" \/>\n<meta property=\"og:site_name\" content=\"Sexshop-xxxl.nl\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-08T21:19:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/m.media-amazon.com\/images\/I\/41DLEjG-9LL.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"353\" \/>\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\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/\",\"url\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/\",\"name\":\"Durex Gevoelsecht, 515 g Natural 29 W\/34 l - Sexshop-xxxl.nl\",\"isPartOf\":{\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/m.media-amazon.com\/images\/I\/41DLEjG-9LL.jpg\",\"datePublished\":\"2022-02-09T07:16:03+00:00\",\"dateModified\":\"2022-04-08T21:19:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/#breadcrumb\"},\"inLanguage\":\"nl\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl\",\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/#primaryimage\",\"url\":\"https:\/\/m.media-amazon.com\/images\/I\/41DLEjG-9LL.jpg\",\"contentUrl\":\"https:\/\/m.media-amazon.com\/images\/I\/41DLEjG-9LL.jpg\",\"width\":353,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/#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\":\"Durex Gevoelsecht, 515 g Natural 29 W\/34 l\"}]},{\"@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":"Durex Gevoelsecht, 515 g Natural 29 W\/34 l - 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\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/","og_locale":"nl_NL","og_type":"article","og_title":"Durex Gevoelsecht, 515 g Natural 29 W\/34 l - Sexshop-xxxl.nl","og_description":"item_display_gewicht; 0,515 kilogram","og_url":"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/","og_site_name":"Sexshop-xxxl.nl","article_modified_time":"2022-04-08T21:19:01+00:00","og_image":[{"width":353,"height":500,"url":"https:\/\/m.media-amazon.com\/images\/I\/41DLEjG-9LL.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/","url":"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/","name":"Durex Gevoelsecht, 515 g Natural 29 W\/34 l - Sexshop-xxxl.nl","isPartOf":{"@id":"https:\/\/www.sexshop-xxxl.nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/#primaryimage"},"image":{"@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/#primaryimage"},"thumbnailUrl":"https:\/\/m.media-amazon.com\/images\/I\/41DLEjG-9LL.jpg","datePublished":"2022-02-09T07:16:03+00:00","dateModified":"2022-04-08T21:19:01+00:00","breadcrumb":{"@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/#breadcrumb"},"inLanguage":"nl","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/"]}]},{"@type":"ImageObject","inLanguage":"nl","@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/#primaryimage","url":"https:\/\/m.media-amazon.com\/images\/I\/41DLEjG-9LL.jpg","contentUrl":"https:\/\/m.media-amazon.com\/images\/I\/41DLEjG-9LL.jpg","width":353,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.sexshop-xxxl.nl\/shop\/gezondheid-and-persoonlijke-verzorging\/durex-gevoelsecht-515-g-natural-29-w-34-l\/#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":"Durex Gevoelsecht, 515 g Natural 29 W\/34 l"}]},{"@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\/6074","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=6074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/media\/6096"}],"wp:attachment":[{"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/media?parent=6074"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/product_cat?post=6074"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/www.sexshop-xxxl.nl\/wp-json\/wp\/v2\/product_tag?post=6074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}