import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import type { FormEvent, JSX } from 'react';
import type { Settings } from '../../shared/api/types/settings';
import { useUpdateSettings } from '../../shared/api/useSettings';
import { Button } from '../../shared/ui/Button';
import { useNotifyOutcome } from '../../shared/ui/useNotifyOutcome';
import { settingsUpdateOf, withoutHost } from './settingsDraft';
import { settingToggles } from './settingToggles';
import { SkipHosts } from './SkipHosts';
import { ToggleRow } from './ToggleRow';

const EMAIL_FIELD_STYLE = { flex: '1 1 240px', maxWidth: 320 };

export function SettingsForm( { saved }: { saved: Settings } ): JSX.Element {
	const notifyOutcome = useNotifyOutcome();
	const updateSettings = useUpdateSettings();
	const [ draft, setDraft ] = useState( saved );

	useEffect( () => {
		setDraft( saved );
	}, [ saved ] );

	const changeDraft = ( change: Partial< Settings > ) => {
		setDraft( ( previousDraft ) => ( { ...previousDraft, ...change } ) );
	};

	const submit = ( event: FormEvent ) => {
		event.preventDefault();
		updateSettings.mutate(
			settingsUpdateOf( draft ),
			notifyOutcome( __( 'Settings saved.', 'aiplaz-link-checkup' ) )
		);
	};

	return (
		<form className="panel form" onSubmit={ submit }>
			{ settingToggles().map( ( toggle ) => (
				<ToggleRow
					key={ toggle.key }
					toggle={ toggle }
					isOn={ draft[ toggle.key ] }
					onToggle={ ( isOn ) => {
						changeDraft( { [ toggle.key ]: isOn } );
					} }
				/>
			) ) }
			<div className="form-row">
				<div className="txt">
					<label className="label" htmlFor="lcu-email-to">
						{ __( 'Send it to', 'aiplaz-link-checkup' ) }
					</label>
				</div>
				<input
					className="input"
					id="lcu-email-to"
					type="email"
					autoComplete="email"
					placeholder="you@example.com"
					style={ EMAIL_FIELD_STYLE }
					disabled={ ! draft.email_enabled }
					value={ draft.email_to }
					onChange={ ( event ) => {
						changeDraft( { email_to: event.target.value } );
					} }
				/>
			</div>
			<SkipHosts
				hosts={ draft.skip_hosts }
				onRemove={ ( host ) => {
					changeDraft( {
						skip_hosts: withoutHost( draft.skip_hosts, host ),
					} );
				} }
			/>
			<div className="form-row">
				<span className="muted">
					{ __(
						'Changes apply to the next check.',
						'aiplaz-link-checkup'
					) }
				</span>
				<Button
					variant="primary"
					type="submit"
					busy={ updateSettings.isPending }
				>
					{ __( 'Save settings', 'aiplaz-link-checkup' ) }
				</Button>
			</div>
		</form>
	);
}