import { __ } from '@wordpress/i18n';
import { useSettings } from '../../contexts/SettingsContext';
import { getSettingsUi } from '../../Helpers';
import useProGate from '../../hooks/useProGate';
import HelpTooltip from '../../components/HelpTooltip';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';

const DAYS = [ 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday' ];

const intervalOptions = ( pro ) => [
	{ value: '10', label: __( 'Every 10minute', TEXT_DOMAIN ) },
	{ value: '30', label: pro ? __( 'Every 30minute', TEXT_DOMAIN ) : __( 'Every 30minute (Ultimate)', TEXT_DOMAIN ) },
	{ value: 'hourly', label: pro ? __( 'Every Hour', TEXT_DOMAIN ) : __( 'Every Hour (Ultimate)', TEXT_DOMAIN ) },
	{ value: 'daily', label: pro ? __( 'Daily', TEXT_DOMAIN ) : __( 'Daily (Ultimate)', TEXT_DOMAIN ) },
	{ value: 'weekly', label: pro ? __( 'Weekly', TEXT_DOMAIN ) : __( 'Weekly (Ultimate)', TEXT_DOMAIN ) },
];

const Field = ( { id, label, help, children, className = '' } ) => (
	<div className={ `cron_sub_wrap ${ className }`.trim() }>
		<label className="ssgsw_addons-labe ssgsw_addons-label" htmlFor={ id }>
			{ label } <HelpTooltip position="top" text={ help } />
		</label>
		{ children }
	</div>
);

/**
 * Interval / day / time selects shared by "Scheduled Sync Frequency" and the formula schedule.
 *
 * @param {Object}  props
 * @param {string}  props.prefix       ID prefix.
 * @param {string}  props.intervalKey  Option key for the interval (cron_perdic_sync / cron_formula_perdic_sync).
 * @param {string}  props.dayKey       Option key for the weekday.
 * @param {string}  props.timeKey      Option key for the hour.
 * @param {boolean} props.lockable     Free users only get "every 10 minutes" (legacy #ssgsw-pro-select).
 */
const ScheduleFields = ( { prefix, intervalKey, dayKey, timeKey, lockable = false } ) => {
	const { options, updateOption } = useSettings();
	const { isPro, showLockedMessage } = useProGate();
	const locked = lockable && ! isPro;
	const interval = locked ? '10' : String( options[ intervalKey ] || '10' );
	const timeLabels = getSettingsUi().sync_time_labels || [];

	const onIntervalChange = ( value ) => {
		// Legacy: picking an Ultimate interval opens the upgrade popup and snaps back to 10 minutes.
		if ( locked ) {
			if ( value !== '10' ) {
				showLockedMessage();
			}
			return;
		}
		updateOption( intervalKey, value );
	};

	return (
		<div className="ssgsw_cron_wrap">
			<Field id={ `${ prefix }-interval` } label={ __( 'Sync Interval:', TEXT_DOMAIN ) } help={ __( 'Choose how often your sync should run.', TEXT_DOMAIN ) }>
				<select
					id={ `${ prefix }-interval` }
					name={ locked ? 'cron_perdic_sync_pro' : intervalKey }
					className="ssgsw_addons-input"
					value={ interval }
					onChange={ ( event ) => onIntervalChange( event.target.value ) }
				>
					{ intervalOptions( ! locked ).map( ( option ) => (
						<option key={ option.value } value={ option.value } data-pro-feature={ locked && option.value !== '10' ? 'true' : undefined }>
							{ option.label }
						</option>
					) ) }
				</select>
			</Field>

			{ ! locked && interval === 'weekly' && (
				<Field id={ `${ prefix }-day` } label={ __( 'Day(s) of Week', TEXT_DOMAIN ) } help={ __( 'Select the day(s) to run weekly sync.', TEXT_DOMAIN ) }>
					<select id={ `${ prefix }-day` } className="ssgsw_addons-input" value={ options[ dayKey ] || 'sunday' } onChange={ ( event ) => updateOption( dayKey, event.target.value ) }>
						{ DAYS.map( ( day ) => (
							<option key={ day } value={ day }>
								{ day.charAt( 0 ).toUpperCase() + day.slice( 1 ) }
							</option>
						) ) }
					</select>
				</Field>
			) }

			{ ! locked && [ 'daily', 'weekly', 'monthly' ].includes( interval ) && (
				<Field id={ `${ prefix }-time` } label={ __( 'Sync Time', TEXT_DOMAIN ) } help={ __( 'Pick the exact time for the sync.', TEXT_DOMAIN ) }>
					<select id={ `${ prefix }-time` } className="ssgsw_addons-input" value={ String( options[ timeKey ] ?? '12' ) } onChange={ ( event ) => updateOption( timeKey, event.target.value ) }>
						{ timeLabels.map( ( hour ) => (
							<option key={ hour.value } value={ hour.value }>
								{ hour.label }
							</option>
						) ) }
					</select>
				</Field>
			) }
		</div>
	);
};

export default ScheduleFields;