/**
 * External dependencies
 */
import { SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
 * Options for the "Order by" control.
 *
 * Defines the available sorting criteria for posts in the query.
 *
 * @type {Array<Object>}
 */
const orderByOptions = [
	{ label: __( 'Title', 'spectra-pro' ), value: 'title' },
	{ label: __( 'Date', 'spectra-pro' ), value: 'date' },
	{ label: __( 'Author', 'spectra-pro' ), value: 'author' },
	{ label: __( 'Last Modified', 'spectra-pro' ), value: 'modified' },
];

/**
 * Options for the "Order" control.
 *
 * Defines the available sorting directions for posts in the query.
 *
 * @type {Array<Object>}
 */
const orderOptions = [
	{ label: __( 'Ascending', 'spectra-pro' ), value: 'asc' },
	{ label: __( 'Descending', 'spectra-pro' ), value: 'desc' },
];

/**
 * A control component for selecting the sorting criteria of posts in a query.
 *
 * This component renders a dropdown menu allowing users to choose the sorting criteria
 * (title, date, author, or last modified). The selected value is passed to the
 * `onChange` callback to update the query.
 *
 * @param {Object}   props          The component props.
 * @param {string}   props.orderBy  The current sorting criteria value.
 * @param {Function} props.onChange Callback function to update the sorting criteria value in the query.
 * @return {Element} The rendered SelectControl component.
 */
export const OrderByControl = ( props ) => {
	const { orderBy, onChange } = props;
	return (
		<SelectControl
			label={ __( 'Order by', 'spectra-pro' ) }
			value={ orderBy }
			options={ orderByOptions }
			onChange={ ( newOrderBy ) => onChange( { orderBy: newOrderBy } ) }
		/>
	);
};

/**
 * A control component for selecting the sorting direction of posts in a query.
 *
 * This component renders a dropdown menu allowing users to choose the direction
 * of the sort (ascending or descending). The selected value is passed to the
 * `onChange` callback to update the query.
 *
 * @param {Object}   props          The component props.
 * @param {string}   props.order    The current order value ('asc' or 'desc').
 * @param {Function} props.onChange Callback function to update the order value in the query.
 * @return {Element} The rendered SelectControl component.
 */
export const OrderControl = ( { order, onChange } ) => {
	return (
		<SelectControl
			label={ __( 'Order', 'spectra-pro' ) }
			value={ order }
			options={ orderOptions }
			onChange={ ( newOrder ) => onChange( { order: newOrder } ) }
		/>
	);
};
