import { array, blob, boolean, date, email, enum_, isoDateTime, isoTime, isoWeek, maxLength, maxSize, maxValue, mimeType, minLength, minValue, multipleOf, number, object, optional, pipe, startsWith, string, url, value, } from "valibot";
import { Caption } from "../typography";
import { ChipsInput } from "./chip-input";
import { Chip, RemoveChipButton } from "./chip-input/chip-input";
import { DateInput, Day, MonthSelect, Year } from "./date-input";
import { Form } from "./form";
import { useFormFields } from "./hooks";
import { Input, Password } from "./input";
import { Option, Select } from "./select";
import { Fieldset, Label, Legend, Section } from "./styled";
import { SubmitButton } from "./submit-button";
import { Textarea } from "./textarea";
let AvatarSchema = pipe(blob(), mimeType(["image/jpeg", "image/png"], "Please select a JPEG or PNG file."), maxSize(1024 * 1024 * 10, "Please select a file smaller than 10 MB."));
let MonsterEnum = {
    Kraken: "K",
    Sasquatch: "S",
    Mothman: "M",
};
let FormControlsSchema = object({
    name: pipe(string(), minLength(1)),
    dateOfBirth: date(),
    meetingTime: pipe(string(), isoDateTime()),
    startMonth: date(),
    appointment: pipe(string(), isoTime()),
    campWeek: pipe(string(), isoWeek()),
    monster: optional(enum_(MonsterEnum)),
    select: enum_(MonsterEnum),
    phone: pipe(string(), startsWith("+")),
    url: pipe(string(), url(), startsWith("https://")),
    avatar: AvatarSchema,
    multiple_files: array(AvatarSchema),
    email: pipe(string(), email()),
    password: pipe(string(), minLength(8), maxLength(64)),
    tos: pipe(boolean(), value(true)),
    textarea: string(),
    color: string(),
    volume: pipe(number(), minValue(0), maxValue(11)),
    cowbell: pipe(number(), minValue(0), maxValue(100), multipleOf(10)),
    uncontrolled: array(string()),
});
export function CompleteForm() {
    let handleSubmit = (payload) => {
        console.log("Payload: ", payload, JSON.stringify(payload, null, 2));
        return new Promise((resolve) => {
            setTimeout(() => resolve(), 5000);
        });
    };
    let formFields = useFormFields(FormControlsSchema);
    return (<div>
			<header>
				<h1>FormControls</h1>
			</header>

			<div>
				<Form schema={FormControlsSchema} onSubmit={handleSubmit}>
					<Fieldset>
						<Legend>Text</Legend>

						<Section>
							<Label htmlFor={formFields.name.id}>Name</Label>
							<Input {...formFields.name} defaultValue="Vulpo"/>
						</Section>

						<Section>
							<Label htmlFor={formFields.email.id}>Email</Label>
							<Input {...formFields.email} defaultValue="dev@vulpo.dev"/>
						</Section>

						<Section>
							<Label htmlFor={formFields.password.id}>Password</Label>
							<Password {...formFields.password} defaultValue="password"/>
						</Section>

						<Section>
							<Label htmlFor={formFields.phone.id}>
								Enter your phone number:
							</Label>

							<Input {...formFields.phone} defaultValue="+4312345678"/>
						</Section>

						<Section>
							<Label htmlFor={formFields.url.id}>Enter an https:// URL:</Label>
							<Input {...formFields.url} defaultValue="https://example.com" size={30}/>
						</Section>

						<Section>
							<Label htmlFor={formFields.textarea.id}>Textarea</Label>
							<Textarea {...formFields.textarea}/>
						</Section>
					</Fieldset>

					<Fieldset>
						<Legend>Files</Legend>

						<Section>
							<Label htmlFor={formFields.avatar.id}>
								Choose a profile picture:
							</Label>
							<Input {...formFields.avatar}/>
						</Section>

						<Section>
							<Label htmlFor={formFields.multiple_files.id}>
								Multiple Files:
							</Label>
							<Input {...formFields.multiple_files}/>
						</Section>
					</Fieldset>

					<Fieldset>
						<Legend>Date and Time</Legend>

						<Section>
							<Label htmlFor={formFields.dateOfBirth.id}>Date of Birth</Label>
							<DateInput {...formFields.dateOfBirth}>
								<Day />
								<MonthSelect />
								<Year />
							</DateInput>
						</Section>

						<Section>
							<Label htmlFor={formFields.meetingTime.id}>
								Choose a time for your appointment:
							</Label>

							<Input {...formFields.meetingTime} defaultValue="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00"/>
						</Section>

						<Section>
							<Label htmlFor={formFields.startMonth.id}>Start month:</Label>
							<Input {...formFields.startMonth} type="month" min="2018-03" defaultValue="2018-05"/>
						</Section>

						<Section>
							<Label htmlFor={formFields.appointment.id}>
								Choose a time for your meeting:
							</Label>
							<Input {...formFields.appointment} min="09:00" max="18:00" defaultValue="14:00"/>
							<Caption>Office hours are 9am to 6pm</Caption>
						</Section>

						<Section>
							<Label htmlFor={formFields.campWeek.id}>
								Choose a week in May or June:
							</Label>
							<Input {...formFields.campWeek} defaultValue="2018-W20" min="2018-W18" max="2018-W26"/>
						</Section>
					</Fieldset>

					<Fieldset>
						<Legend>Misc</Legend>

						<Section>
							<Label htmlFor={formFields.color.id}>Color</Label>
							<Input {...formFields.color} type="color"/>
						</Section>

						<Section>
							<Label>
								<Input {...formFields.tos}/>I agree to the Terms of Service
							</Label>
						</Section>

						<Section>
							<Fieldset>
								<Legend>Choose your favorite monster</Legend>

								<Label htmlFor={formFields.monster.radio.Kraken.id}>
									<Input {...formFields.monster.radio.Kraken}/>
									Kraken
								</Label>
								<br />

								<Label htmlFor={formFields.monster.radio.Sasquatch.id}>
									<Input {...formFields.monster.radio.Sasquatch}/>
									Sasquatch
								</Label>
								<br />

								<Label htmlFor={formFields.monster.radio.Mothman.id}>
									<Input {...formFields.monster.radio.Mothman}/>
									Mothman
								</Label>
							</Fieldset>
						</Section>

						<Section>
							<Label htmlFor={formFields.select.select.id}>
								Select a monster
							</Label>
							<Select {...formFields.select.select}>
								{formFields.select.options.map((option) => (<Option key={option.name} value={option.value}>
										{option.name}
									</Option>))}
							</Select>
						</Section>

						<Section>
							<Fieldset>
								<Legend>Audio settings:</Legend>

								<div>
									<Input {...formFields.volume} type="range"/>
									<Label htmlFor={formFields.volume.id}>Volume</Label>
								</div>

								<div>
									<Input {...formFields.cowbell} type="range" defaultValue="90"/>
									<Label htmlFor={formFields.cowbell.id}>Cowbell</Label>
								</div>
							</Fieldset>
						</Section>

						<Section>
							<Label htmlFor={formFields.uncontrolled.id}>
								Uncontrolled Empty Chips:
							</Label>
							<ChipsInput {...formFields.uncontrolled} defaultValue="one,two" onValidationError={(err) => { }} render={({ value, isFocus, onDelete }) => (<Chip style={{ borderColor: isFocus ? "red" : undefined }}>
										{value} <RemoveChipButton onClick={onDelete}/>
									</Chip>)}/>
						</Section>
					</Fieldset>

					<Section>
						<SubmitButton>Submit</SubmitButton>
					</Section>
				</Form>
			</div>
		</div>);
}