import React from 'react';
import RenderFields from '@Components/RenderFields';
import ConditionsHelper from '@Utils/conditions';

const SmsTemplatesDrawerBody = ( { formState, handleChange, errors } ) => {
	const smsFields = cart_abandonment_admin?.settings_fields?.sms_fields;
	const conditions = new ConditionsHelper();

	return (
		<div className="p-1 flex flex-col gap-1 bg-light-background rounded-lg">
			{ smsFields &&
				Object.entries( smsFields )
					?.sort( ( a, b ) => a[ 1 ]?.priority - b[ 1 ]?.priority )
					?.map( ( [ field, data ] ) => {
						const isFieldActive = conditions.isActiveControl(
							data,
							formState
						);

						// Don't render wrapper div if field is not active
						if ( ! isFieldActive ) {
							return null;
						}

						return (
							<div
								key={ field }
								className="px-4 rounded-md bg-white shadow-sm"
							>
								<RenderFields
									data={ data }
									value={
										[
											'time',
											'test_email',
											'test_message',
										].includes( data?.type )
											? formState
											: formState[ field ] || ''
									}
									isActive={ true }
									handleChange={ handleChange }
									errors={ errors }
									autoSave={ false }
								/>
							</div>
						);
					} ) }
		</div>
	);
};

export default SmsTemplatesDrawerBody;

