/**
 * External dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';
import { memo, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { spectraClassNames } from '@spectra-helpers';
import { useSpectraStyles } from '@spectra-hooks';

/**
 * Generates a string of pagination numbers, given a midSize value.
 *
 * The string will contain the first 'midSize' numbers, the current number
 * (midSize + 1), the second set of 'midSize' numbers, and the last number
 * (midSize * 2 + 3), separated by spaces.
 *
 * @since x.x.x
 *
 * @param {number} midSize The number of items to display in each set.
 * @return {string} The pagination numbers string.
 */
export const getPaginationNumbers = ( midSize ) => {
	let numbers = '';

	// First set of pagination items.
	for ( let i = 1; i <= midSize; i++ ) {
		numbers += ' ' + i.toString();
	}

	// Current pagination item.
	numbers += ' ' + ( midSize + 1 ).toString();

	// Second set of pagination items.
	for ( let i = 1; i <= midSize; i++ ) {
		numbers += ' ' + ( midSize + 1 + i ).toString();
	}

	// Dots.
	numbers += '\u2026';

	// Last pagination item.
	numbers += ( midSize * 2 + 3 ).toString();

	return numbers;
};

/**
 * The Render function for the pagination page numbers button block.
 *
 * This component renders a button with pagination numbers, allowing users
 * to navigate between pages. It supports styling for different states such
 * as hover and active, using CSS variables derived from block attributes.
 * The component dynamically updates the pagination numbers based on the
 * `midSize` attribute.
 *
 * @param {Object} props - The component properties.
 * @return {Element} The rendered component.
 */
const Render = ( props ) => {
	const {
		isSelected,
		setAttributes,
		context: {
			'spectra-pro/loop-builder-pagination/textColor': parentTextColor,
			'spectra-pro/loop-builder-pagination/textColorActive': parentTextColorActive,
			'spectra-pro/loop-builder-pagination/textColorHover': parentTextColorHover,
			'spectra-pro/loop-builder-pagination/backgroundColor': parentBackgroundColor,
			'spectra-pro/loop-builder-pagination/backgroundColorActive': parentBackgroundColorActive,
			'spectra-pro/loop-builder-pagination/backgroundColorHover': parentBackgroundColorHover,
			'spectra-pro/loop-builder-pagination/backgroundGradient': parentBackgroundGradient,
			'spectra-pro/loop-builder-pagination/backgroundGradientActive': parentBackgroundGradientActive,
			'spectra-pro/loop-builder-pagination/backgroundGradientHover': parentBackgroundGradientHover,
		},
		attributes,
	} = props;

	const {
		text,
		textColor = parentTextColor,
		textColorActive = parentTextColorActive,
		textColorHover = parentTextColorHover,
		backgroundColor = parentBackgroundColor,
		backgroundColorHover = parentBackgroundColorHover,
		backgroundColorActive = parentBackgroundColorActive,
		backgroundGradient = parentBackgroundGradient,
		backgroundGradientHover = parentBackgroundGradientHover,
		backgroundGradientActive = parentBackgroundGradientActive,
		midSize,
	} = attributes;

	// Configuration for the useSpectraStyles hook.
	const config = [
		{ key: 'textColor', value: textColor },
		{ key: 'textColorHover', value: textColorHover },
		{ key: 'textColorActive', value: textColorActive },
		{ key: 'backgroundColor', value: backgroundColor },
		{ key: 'backgroundColorHover', value: backgroundColorHover },
		{ key: 'backgroundColorActive', value: backgroundColorActive },
		{ key: 'backgroundGradient', value: backgroundGradient },
		{ key: 'backgroundGradientHover', value: backgroundGradientHover },
		{ key: 'backgroundGradientActive', value: backgroundGradientActive },
	];

	// Additional classes.
	const additionalClasses = [ 'wp-block-button', 'wp-block-button__link', isSelected && 'current' ];

	// Generate styles and class names.
	const { style, classNames } = useSpectraStyles( attributes, config, additionalClasses );

	// Use the block props, with the added CSS variables and their related classes.
	const blockProps = useBlockProps( {
		className: spectraClassNames( classNames ),
		style,
	} );

	useEffect( () => {
		setAttributes( {
			text: getPaginationNumbers( parseInt( midSize, 10 ) ),
		} );
	}, [ midSize ] );

	return (
		<div { ...blockProps }>
			<div className="spectra-button__link">{ text || __( '1 2 3 4 5 \u2026 7', 'spectra-pro' ) }</div>
		</div>
	);
};

export default memo( Render );
