---
import Form, { FormControl, FormGroup } from '@astro-reactive/form';
import type { ControlConfig } from '@astro-reactive/form';
import { Validators } from '@astro-reactive/validator';
import type { Submit } from '@astro-reactive/common';
import Layout from '../components/Layout.astro';

const infoForm = new FormGroup([
	{
		name: 'firstName',
		label: 'First Name',
		placeholder: 'ex. John',
		validators: [Validators.required],
	},
	{
		name: 'lastName',
		label: 'Last Name',
		placeholder: 'ex. Doe',
		validators: [Validators.required],
	},
	{
		name: 'email',
		label: 'Email',
		placeholder: 'ex. john.doe@email.com',
		validators: [Validators.email, Validators.required],
	},
	{
		name: 'whyHire',
		label: 'Why should we hire you?',
	},
	{
		name: 'country',
		label: 'Country of Residence',
		type: 'dropdown',
		options: ['U.S.A', 'Canada', 'Mexico', 'Cuba', 'Guatamala', 'Greenland', 'Haiti'],
		placeholder: 'Choose Your Country',
	},
	{
		name: 'eligible',
		label: 'Are you eligible to work?',
		type: 'radio',
		options: [
			{ label: 'Yes', value: 'yes' },
			{ label: 'No', value: 'no' },
		],
	},
]);

const skillsForm = new FormGroup([
	{
		name: 'js',
		label: 'Javascript',
		type: 'checkbox',
	},
	{
		name: 'java',
		label: 'Java',
		type: 'checkbox',
	},
	{
		name: 'astro',
		label: 'Astro',
		type: 'checkbox',
	},
	{
		name: 'cpp',
		label: 'C/C++',
		type: 'checkbox',
	},
	{
		name: 'sql',
		label: 'SQL',
		type: 'checkbox',
	},
	{
		name: 'devops',
		label: 'DevOps',
		type: 'checkbox',
	},
]);

const resume: ControlConfig = {
	name: 'resume',
	label: 'Upload Resume',
	type: 'file',
};

const submit: Submit = {
	name: 'submit',
	type: 'submit',
	value: "Let's go!",
};

const values = {
	firstName: 'James',
	lastName: 'Bond',
	email: 'james.bond@gmail.com',
	country: 'U.S.A',
	eligible: 'yes',
};

infoForm.setValue(values);

infoForm.name = 'Application Form';
skillsForm.name = 'Skills';

skillsForm.controls.push(new FormControl(resume));
---

<Layout title="Programmer Job Application">
	<Form showValidationHints formGroups={[infoForm, skillsForm]} submitControl={submit} />
</Layout>