import { useState } from '@wordpress/element';
import { runSettingsAction } from '../api';

export function ProfileSection( { section, profiles, i18n, onApplied, setNotice } ) {
	const [ siteProfile, setSiteProfile ] = useState( profiles?.site || 'newsroom' );
	const [ publisherProfile, setPublisherProfile ] = useState( profiles?.publisher || 'standard' );
	const [ busy, setBusy ] = useState( '' );

	const apply = async ( action, profile ) => {
		if ( ! window.confirm( i18n?.profileConfirm ) ) {
			return;
		}
		setBusy( action );
		setNotice( null );
		try {
			const res = await runSettingsAction( action, { profile } );
			if ( res.profiles ) {
				if ( res.profiles.site ) {
					setSiteProfile( res.profiles.site );
				}
				if ( res.profiles.publisher ) {
					setPublisherProfile( res.profiles.publisher );
				}
			}
			if ( res.values ) {
				onApplied( res );
			}
			setNotice( { type: 'success', text: res.message || i18n?.saved } );
		} catch ( e ) {
			setNotice( { type: 'error', text: e?.message || i18n?.error } );
		} finally {
			setBusy( '' );
		}
	};

	const publisherChoices = profiles?.publisherChoices || {};

	return (
		<section className="newsroom-settings__section nros-card">
			<header className="newsroom-settings__section-head">
				<div>
					<h4>{ section.title }</h4>
					<p>{ section.intro }</p>
				</div>
			</header>

			<div className="newsroom-settings__profile-block">
				<h5>{ i18n?.siteProfile }</h5>
				<div className="newsroom-settings__radio-group">
					{ Object.entries( profiles?.siteChoices || {} ).map( ( [ key, label ] ) => (
						<label key={ key } className="newsroom-settings__radio-item">
							<input
								type="radio"
								name="site_profile"
								value={ key }
								checked={ siteProfile === key }
								onChange={ () => setSiteProfile( key ) }
							/>
							<span>{ label }</span>
						</label>
					) ) }
				</div>
				<button
					type="button"
					className="button button-secondary"
					disabled={ !! busy }
					onClick={ () => apply( 'apply_site_profile', siteProfile ) }
				>
					{ i18n?.applyProfile }
				</button>
			</div>

			<div className="newsroom-settings__profile-block">
				<h5>{ i18n?.publisherProfile }</h5>
				<div className="newsroom-settings__radio-group">
					{ Object.entries( publisherChoices ).map( ( [ key, meta ] ) => (
						<label key={ key } className="newsroom-settings__radio-item newsroom-settings__radio-item--stacked">
							<input
								type="radio"
								name="publisher_profile"
								value={ key }
								checked={ publisherProfile === key }
								onChange={ () => setPublisherProfile( key ) }
							/>
							<span>
								<strong>{ meta.label }</strong>
								{ meta.desc && <small>{ meta.desc }</small> }
							</span>
						</label>
					) ) }
				</div>
				<button
					type="button"
					className="button button-secondary"
					disabled={ !! busy }
					onClick={ () => apply( 'apply_publisher_profile', publisherProfile ) }
				>
					{ i18n?.applyProfile }
				</button>
			</div>
		</section>
	);
}
