---
import type { Submit, Radio, RadioOption } from 'common/types';
import { FormGroup, FormControl } from './core';
import FieldSet from './components/FieldSet.astro';
import Field from './components/Field.astro';

export interface Props {
	formGroups: FormGroup | FormGroup[];
	submitControl?: Submit;
	theme?: 'light' | 'dark';
	showValidationHints?: boolean;
}

const { submitControl, formGroups: form, theme, showValidationHints = false } = Astro.props;

const formTheme = theme ?? 'light';
const formName = Array.isArray(form) ? null : form?.name || null;
---

<form class={formTheme} name={formName} id={formName}>
	{
		Array.isArray(form)
			? form?.map((group) => <FieldSet showValidationHints={showValidationHints} group={group} />)
			: form?.controls.map((control) =>
					control.type === 'radio' ? (
						[
							<Field
								showValidationHints={showValidationHints}
								control={control}
								showOnlyLabel={true}
							/>,
							...(control as Radio)?.value?.map((v: string | RadioOption) => (
								<Field
									showValidationHints={showValidationHints}
									control={
										typeof v === 'string'
											? new FormControl({
													name: control.name,
													type: 'radio',
													id: control.name + v,
													label: v,
													value: v,
											  })
											: new FormControl({
													name: control.name,
													type: 'radio',
													id: control.name + v.label,
													...(v as RadioOption),
											  })
									}
								/>
							)),
						]
					) : (
						<Field showValidationHints={showValidationHints} control={control} />
					)
			  )
	}
	{
		submitControl && (
			<Field showValidationHints={showValidationHints} control={new FormControl(submitControl)} />
		)
	}
</form>

<style>
	.light {
		/**
		* run dev server with: "npm start",
		* then open browser to "localhost:3000"
		* add a class="light" to the <form> element above to test changes
		* INSERT STYLES FOR LIGHT MODE BELOW: */
	}

	.dark {
		/**
		* run dev server with: "npm start",
		* then open browser to "localhost:3000"
		* add a class="dark" to the <form> element above to test changes
		* INSERT STYLES FOR DARK MODE BELOW: */
		background-color: #333;
		color: white;
	}
</style>