import { boolean, email, maxLength, minLength, object, pipe, string, value, } from "valibot";
import { Button } from "../button";
import { Form } from "./form";
import { CompleteForm } from "./form.stories.utils";
import { Input, Password } from "./input";
import { Label, Section } from "./styled";
export default {
    title: "Form/Form",
};
let LoginSchema = object({
    email: pipe(string(), email()),
    password: pipe(string(), minLength(8), maxLength(64)),
    tos: pipe(boolean(), value(true)),
});
export let Auth = {
    render: () => {
        let handleSubmit = (payload) => {
            console.log({ payload });
        };
        return (<div>
				<header>
					<h1>Login</h1>
				</header>
				<Form schema={LoginSchema} onSubmit={handleSubmit}>
					<Section>
						<Label htmlFor="email">Email</Label>
						<Input name="email" type="email"/>
					</Section>

					<Section>
						<Label htmlFor="password">Password</Label>
						<Password name="password"/>
					</Section>

					<Section>
						<Label htmlFor="password">
							<Input name="tos" required type="checkbox"/>I agree to the Terms
							of Service
						</Label>
					</Section>

					<Section>
						<Button type="submit">Login</Button>
					</Section>
				</Form>
			</div>);
    },
};
export let FormControls = {
    render: CompleteForm,
};