import {Input} from '@headlessui/react';
import {__} from '@wordpress/i18n';
import Select from '../components/Select';
import Toggle from '../components/Toggle';

const PERIOD_UNIT_OPTIONS = [
	{value: 'hour', label: __( 'Hour(s)', 'adpresso' )},
	{value: 'day', label: __( 'Day(s)', 'adpresso' )},
	{value: 'week', label: __( 'Week(s)', 'adpresso' )},
	{value: 'month', label: __( 'Month(s)', 'adpresso' )},
];

const MaxImpressionsField = ( {field, value, onChange, showEnabledToggle = false} ) => {
	const current = value || {};
	const enabled       = showEnabledToggle ? Boolean( Number( current.enabled ) || current.enabled === true ) : true;
	const count            = current.count ?? 3;
	const periodAmount     = current.period_amount ?? 1;
	const periodUnit       = current.period_unit ?? 'day';
	const cooldownMinutes  = current.cooldown_minutes ?? 0;

	const selectedUnit = PERIOD_UNIT_OPTIONS.find( ( opt ) => opt.value === periodUnit ) || PERIOD_UNIT_OPTIONS[1];

	return (
		<div className="adpresso-max-impressions-wrapper">
			{showEnabledToggle && (
				<Toggle
					label={field.label}
					enabled={enabled}
					setEnabled={( newEnabled ) => onChange( 'enabled', newEnabled )}
				/>
			)}
			{( !showEnabledToggle || enabled ) && (
				<div className="adpresso-max-impressions-controls">
					<Input
						type="number"
						min="1"
						className="adpresso-input adpresso-max-impressions-count"
						value={count}
						onChange={( e ) => onChange( 'count', Math.max( 1, Number( e.target.value ) || 1 ) )}
					/>
					<span className="adpresso-max-impressions-label">{__( 'times per', 'adpresso' )}</span>
					<Input
						type="number"
						min="1"
						className="adpresso-input adpresso-max-impressions-period-amount"
						value={periodAmount}
						onChange={( e ) => onChange( 'period_amount', Math.max( 1, Number( e.target.value ) || 1 ) )}
					/>
					<Select
						options={PERIOD_UNIT_OPTIONS}
						selected={selectedUnit}
						setSelected={( opt ) => onChange( 'period_unit', opt.value )}
						className="adpresso-max-impressions-period-unit"
					/>
				</div>
			)}
			{( !showEnabledToggle || enabled ) && (
				<div className="adpresso-max-impressions-controls adpresso-max-impressions-cooldown">
					<span className="adpresso-max-impressions-label">{__( 'and at least', 'adpresso' )}</span>
					<Input
						type="number"
						min="0"
						className="adpresso-input adpresso-max-impressions-cooldown-minutes"
						value={cooldownMinutes}
						onChange={( e ) => onChange( 'cooldown_minutes', Math.max( 0, Number( e.target.value ) || 0 ) )}
					/>
					<span className="adpresso-max-impressions-label">{__( 'minute(s) between two impressions', 'adpresso' )}</span>
				</div>
			)}
		</div>
	);
};

export default MaxImpressionsField;