import { Field } from './Field';
import { TipsList } from './TipsList';
import { SectionActions } from './SectionActions';
import { SectionTools } from './SectionTools';

export function SectionPanel( {
	section,
	values,
	onChange,
	isDirty,
	onSave,
	saving,
	saveLabel,
	savingLabel,
	helpTitle,
	fieldLabels,
	meta,
	i18n,
	pro,
	setNotice,
	onActionDone,
	onMetaUpdate,
	onGeneratePolicy,
} ) {
	const sectionValues = values || {};

	return (
		<section className={ `newsroom-settings__section nros-card${ isDirty ? ' is-dirty' : '' }` }>
			<header className="newsroom-settings__section-head">
				<div>
					<h4>{ section.title }</h4>
					<p>{ section.intro }</p>
				</div>
				{ isDirty && <span className="newsroom-settings__dirty-dot" title="Unsaved changes" aria-hidden="true" /> }
			</header>

			{ section.tips && section.tips.length > 0 && (
				<TipsList title={ helpTitle } tips={ section.tips } />
			) }

			<div className="newsroom-settings__fields">
				{ Object.entries( section.fields || {} ).map( ( [ key, field ] ) => (
					<Field
						key={ key }
						fieldKey={ key }
						field={ field }
						value={ sectionValues[ key ] }
						sectionValues={ sectionValues }
						onChange={ ( val ) => onChange( key, val ) }
						labels={ fieldLabels }
						meta={ meta }
						onGeneratePolicy={ onGeneratePolicy }
					/>
				) ) }
			</div>

			<SectionTools
				section={ section }
				meta={ meta }
				i18n={ i18n }
				pro={ pro }
				setNotice={ setNotice }
				onMetaUpdate={ onMetaUpdate }
			/>
			<SectionActions
				actions={ section.actions }
				meta={ meta }
				i18n={ i18n }
				setNotice={ setNotice }
				onActionDone={ onActionDone }
			/>

			<footer className="newsroom-settings__section-foot">
				<button
					type="button"
					className="button button-primary"
					disabled={ ! isDirty || saving }
					onClick={ onSave }
				>
					{ saving ? savingLabel : saveLabel }
				</button>
			</footer>
		</section>
	);
}
