import { useId, useState } from "react";
import { date, maxValue, minValue, pipe } from "valibot";
import { Button } from "../../button";
import { Input } from "../input";
import { Label, Section } from "../styled";
import { buttonSection, formSection } from "./date_input.stories.css";
import { DateInput, Day, MonthInput, MonthSelect, Year } from "./index";
export default {
    title: "Form/DateInput",
    component: DateInput,
};
let DateSchema = pipe(date(), minValue(new Date(2024, 0, 1), "Expected value to be after 2024-01-01"), maxValue(new Date(2025, 0, 1), "Expected value to be before 2025-01-01"));
export let Default = {
    render: () => {
        let [date, setDate] = useState("2024-02-01");
        let [input, setInput] = useState("Initial Value");
        let submit = (e) => {
            e.preventDefault();
            let target = e.target;
            let data = new FormData(target);
            console.log(data.getAll("date"));
        };
        let reset = () => {
            setInput("Initial Value");
            setDate("2024-02-01");
        };
        let inputId = useId();
        let dateId = useId();
        let monthSelectId = useId();
        let monthInputId = useId();
        return (<div>
				<section className={formSection}>
					<h2>Uncontrolled</h2>
					<form onSubmit={submit}>
						<section className={buttonSection}>
							<Button type="reset">Reset</Button>
							<Button type="submit">Submit</Button>
						</section>

						<Section>
							<Label htmlFor={inputId}>Input</Label>
							<Input id={inputId} name="input" defaultValue="Initial Value"/>
						</Section>

						<Section>
							<Label htmlFor={dateId}>Month Selector</Label>
							<DateInput name="date" id={dateId}>
								<Day />
								<MonthSelect />
								<Year />
							</DateInput>
						</Section>
					</form>
				</section>

				<section>
					<h2>Controlled</h2>

					<form onSubmit={submit} onReset={reset}>
						<section className={buttonSection}>
							<Button type="reset">Reset</Button>
							<Button type="submit">Submit</Button>
						</section>

						<Section>
							<Input value={input} onChange={(e) => setInput(e.target.value)} name="input" defaultValue="Initial Value"/>
						</Section>

						<Section>
							<Label htmlFor={monthSelectId}>Month Select</Label>
							<DateInput name="date" id={monthSelectId} value={date} onChange={(e) => setDate(e.target.value)} validate={DateSchema}>
								<Day />
								<MonthSelect />
								<Year />
							</DateInput>
						</Section>

						<Section>
							<Label htmlFor={monthInputId}>Month Input</Label>
							<DateInput value={date} onChange={(e) => setDate(e.target.value)} name="date" id={monthInputId} validate={DateSchema}>
								<Day />
								<MonthInput />
								<Year />
							</DateInput>
						</Section>

						<Section>
							<Input type="date" name="date" value={date} onChange={(e) => setDate(e.target.value)}/>
						</Section>
					</form>
				</section>
			</div>);
    },
};