import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Settings } from '../../shared/api/types/settings';
import { Icon } from '../../shared/ui/Icon';
import { Switch } from '../../shared/ui/Switch';
import {
	QUIET_HOURS_WINDOWS,
	quietHoursSwitchedText,
	windowChangedText,
	windowLabel,
	windowOf,
	windowValue,
} from './quietHoursWindows';
import { useSaveSettings } from './useSaveSettings';

export function QuietHours( {
	quietHours,
}: {
	quietHours: Settings[ 'quiet_hours' ];
} ): JSX.Element {
	const saveSettings = useSaveSettings();

	return (
		<div className="panel">
			<div className="form-row">
				<span className="dot dot-moved">
					<Icon name="moon" />
				</span>
				<div className="txt">
					<label className="label" htmlFor="lcu-quiet-on">
						{ __( 'Quiet hours', 'aiplaz-link-checkup' ) }
					</label>
					<span>
						{ __(
							'The full check waits for the night, when few visitors are on your site.',
							'aiplaz-link-checkup'
						) }
					</span>
				</div>
				<label className="sr" htmlFor="lcu-quiet-hours">
					{ __( 'Night hours', 'aiplaz-link-checkup' ) }
				</label>
				<select
					className="select"
					id="lcu-quiet-hours"
					value={ windowValue( quietHours ) }
					onChange={ ( event ) => {
						const chosenWindow = windowOf( event.target.value );

						saveSettings(
							{ quiet_hours: chosenWindow },
							windowChangedText( chosenWindow )
						);
					} }
				>
					{ QUIET_HOURS_WINDOWS.map( ( quietWindow ) => (
						<option
							key={ quietWindow.from }
							value={ windowValue( quietWindow ) }
						>
							{ windowLabel( quietWindow ) }
						</option>
					) ) }
				</select>
				<Switch
					id="lcu-quiet-on"
					checked={ quietHours.enabled }
					onChange={ ( event ) => {
						const isEnabled = event.target.checked;

						saveSettings(
							{ quiet_hours: { enabled: isEnabled } },
							quietHoursSwitchedText( isEnabled )
						);
					} }
				/>
			</div>
		</div>
	);
}