import {memo, useEffect, useCallback, useMemo, forwardRef} from '@wordpress/element';
import FieldRenderer from '../../../design/FieldRenderer';
import SummaryRenderer from './SummaryRenderer';

const Section = forwardRef(( {entityData, section, allMetaData, onDataChange, availableConditions, i18n, setDependentFields, injectedFields, isCollapsed, onToggleSection, sectionId, onSetDirty}, ref ) => {

	const handleToggle = useCallback( () => {
		onToggleSection( sectionId );
	}, [onToggleSection, sectionId] );


	const { controllerFields, regularFields } = useMemo(() => {
		const controllers = [];
		const regulars = [];

		// Make sure, that section.fields exist
		(section.fields || []).forEach(field => {
			if (field.controls_dependencies === true) {
				controllers.push(field);
			} else {
				regulars.push(field);
			}
		});

		return { controllerFields: controllers, regularFields: regulars };
	}, [section.fields]);

	// Take care of dependent fields.
	useEffect( () => {
		// Check if the section should manage dependent fields.
		if ( typeof setDependentFields !== 'function' ) {
			return;
		}

		// Find the master field, flexible, based on the flag
		const controllerField = section.fields.find( f => f.controls_dependencies === true );

		// If there is no master field, empty the values.
		if ( ! controllerField ) {
			setDependentFields( [] );
			return;
		}

		const selectedValue = allMetaData[controllerField.id];
		const selectedOption = controllerField.options ? controllerField.options[selectedValue] : null;

		// Trigger the callback to refresh the parent state
		setDependentFields( selectedOption?.dependent_fields || [] );

	}, [allMetaData, section.fields, setDependentFields] );

	const conditionsField = useMemo( () => ({id: 'conditions_tree', type: 'conditions'}), [] );

	const renderFieldList = (fields) => {
		if (!Array.isArray(fields) || fields.length === 0) return null;
		return fields.map(field => (
			<FieldRenderer
				ref={ref}
				key={field.id}
				field={field}
				allMetaData={allMetaData}
				onDataChange={onDataChange}
				entityData={entityData}
				onSetDirty={onSetDirty}
				fields={fields}
				variantClass={field.class}
			/>
		));
	};

	return (
		<div className={`adpresso-modal-section ${isCollapsed ? 'is-collapsed' : 'is-open'}`}>
			<h2 className="adpresso-modal-section-title" onClick={handleToggle}>
				{section.title}
			</h2>
			{isCollapsed ? (
				<div className="adpresso-modal-section-summary" onClick={handleToggle}>
					<SummaryRenderer section={section} allMetaData={allMetaData} entityData={entityData} i18n={i18n} availableConditions={availableConditions}/>
				</div>
			) : (
				<div className="adpresso-modal-section-fields">

					{section.id === 'adpresso_conditions' ? (
						// Special case: Conditions
						<FieldRenderer field={conditionsField}
									   allMetaData={allMetaData}
									   onDataChange={onDataChange}
									   availableConditions={availableConditions}
									   entityData={entityData}
						/>
					) : (
						// Default section with sorted order
						<>
							{/* Controller field, e.g. placement type */}
							{renderFieldList(controllerFields)}
							{/* Injected fields (dependent from controller) */}
							{/* Security fallback if backend send some wrong data */}
							{renderFieldList(Array.isArray(injectedFields) ? injectedFields : [])}
							{/* Regular fields */}
							{renderFieldList(regularFields)}
						</>
					)}
				</div>
			)}
		</div>
	);
});

export default memo( Section );