import { useState } from "react";
import { email, endsWith, minLength, pipe, string } from "valibot";
import { Label, Section } from "../styled";
import { Input, Password } from "./index";
export default {
    title: "Form/Input",
    component: Input,
};
let EmailSchema = pipe(string(), minLength(1, "Please enter your email."), email("The email is badly formatted."), endsWith("@vulpo.dev"));
export let Default = {
    render: () => {
        return (<form>
				<Section>
					<Label>Default</Label>
					<Input name="default"/>
				</Section>
				<Section>
					<Label>With Validation</Label>
					<Input name="email" validate={EmailSchema}/>
				</Section>
				<Section>
					<Label>Number</Label>
					<Input type="number" name="number"/>
				</Section>
				<Section>
					<Label>Invalid</Label>
					<Input ref={(node) => node?.setCustomValidity("Invalid")} required name="invalid"/>
				</Section>
			</form>);
    },
};
export let Disabled = {
    render: () => {
        let [text, setText] = useState("Bla Bla Bla");
        return (<Input value={text} onChange={(e) => setText(e.target.value)} disabled/>);
    },
};
export let AsPassword = {
    name: "Password",
    render: () => {
        let [text, setText] = useState("");
        return <Password value={text} onChange={(e) => setText(e.target.value)}/>;
    },
};