/**
 * Main App component for the Inventory page
 */
import { useInventoryFields } from './hooks/useInventoryFields';
import { InfoSidebar } from './components/InfoSidebar/InfoSidebar';
import { SimpleInventoryField } from './components/SimpleInventoryField';
import { SimpleInventoryChoicesField } from './components/SimpleInventoryChoicesField';
import { AdvancedInventoryField } from './components/AdvancedInventoryField';
import { AdvancedInventoryChoicesField } from './components/AdvancedInventoryChoicesField';
import { isChoiceField } from './utils/fieldUtils';

/**
 * Enum for field component types
 */
enum FieldComponentType {
	SIMPLE = 'simple',
	SIMPLE_CHOICES = 'simple-choices',
	ADVANCED = 'advanced',
	ADVANCED_CHOICES = 'advanced-choices',
}

/**
 * Determine the component type for a field based on its properties
 *
 * @param field The field to check
 * @return The component type as an enum value
 */
function getFieldComponentType(field: GravityFormsField): FieldComponentType {
	const isChoice = isChoiceField(field);
	const isAdvanced = field.gpiInventory === 'advanced';

	if (isAdvanced && isChoice) return FieldComponentType.ADVANCED_CHOICES;
	if (isAdvanced) return FieldComponentType.ADVANCED;
	if (isChoice) return FieldComponentType.SIMPLE_CHOICES;
	return FieldComponentType.SIMPLE;
}

export function InventoryWrapper() {
	// Get all inventory fields
	const inventoryFields = useInventoryFields();

	// Map component types to their respective components
	const componentMap = {
		[FieldComponentType.SIMPLE]: SimpleInventoryField,
		[FieldComponentType.SIMPLE_CHOICES]: SimpleInventoryChoicesField,
		[FieldComponentType.ADVANCED]: AdvancedInventoryField,
		[FieldComponentType.ADVANCED_CHOICES]: AdvancedInventoryChoicesField,
	};

	return (
		<div className="gform-settings__wrapper gform-settings__wrapper--full">
			<div id="poststuff" className="metabox-holder has-right-sidebar">
				<InfoSidebar />

				<div id="gpi-results-wrapper">
					<div id="gpi-results" style={{ opacity: 1 }}>
						{inventoryFields.length > 0 ? (
							inventoryFields.map((field) => {
								const componentType =
									getFieldComponentType(field);
								const Component = componentMap[componentType];

								return (
									<Component key={field.id} field={field} />
								);
							})
						) : (
							<div className="gform-settings-panel">
								<div
									className="gform-settings-panel__content"
									style={{
										padding: '20px',
										textAlign: 'center',
									}}
								>
									<p>
										No inventory fields found in this form.
									</p>
									<p>
										Add inventory to fields in the form
										editor to see them here.
									</p>
								</div>
							</div>
						)}
					</div>
				</div>
			</div>
		</div>
	);
}