import {__} from '@wordpress/i18n';
import Select from '../../../../admin/assets/design/components/Select';

const DatePresetPicker = ( {value, onChange, className = ''} ) => {

	const dateRangeOptions = [
		{value: 'today', label: __( 'Today', 'adpresso' )},
		{value: 'yesterday', label: __( 'Yesterday', 'adpresso' )},
		{value: 'last_7_days', label: __( 'Last 7 Days', 'adpresso' )},
		{value: 'last_30_days', label: __( 'Last 30 Days', 'adpresso' )},
		{value: 'this_month', label: __( 'This Month', 'adpresso' )},
		{value: 'last_month', label: __( 'Last Month', 'adpresso' )},
		{value: 'this_quarter', label: __( 'This Quarter', 'adpresso' )},
		{value: 'this_year', label: __( 'This Year', 'adpresso' )},
		{value: 'last_12_months', label: __( 'Last 12 Months', 'adpresso' )},
		{value: 'ytd', label: __( 'Year to Date', 'adpresso' )},
		{value: 'custom', label: __( 'Custom', 'adpresso' )}
	];

	const selectedDateRangeOptions = dateRangeOptions.find( opt => opt.value === value ) || dateRangeOptions[0];

	return (
		<div className={`adpresso-date-preset-picker ${className}`}>
			<Select
				options={dateRangeOptions}
				selected={selectedDateRangeOptions}
				setSelected={( option ) => onChange( option ? option.value : 'last_30_days' )}
			/>
		</div>
	);
};

export default DatePresetPicker;