import { useId, useState } from "react";
import { minLength, pipe, string, transform } from "valibot";
import { Button } from "../../button";
import { Input } from "../input";
import { Label, Section } from "../styled";
import { RemoveChipButton } from "./chip_input";
import { buttonSection, chip, formSection, styledChipsInput, } from "./chip_input.stories.css";
import { ChipsInput } from "./index";
export default {
    title: "Form/ChipsInput",
    component: ChipsInput,
};
// TODO: Show validation
let ChipSchema = pipe(string(), transform((value) => value.split(",")), minLength(3, "add at least 3 tags"));
let InputSchema = pipe(string(), minLength(3, "tags should be at least 3 characters long"));
export let Default = {
    render: () => {
        let [chips, setChips] = useState("one,two");
        let [input, setInput] = useState("Initial Value");
        let submit = (e) => {
            e.preventDefault();
            let target = e.target;
            let data = new FormData(target);
            console.log({ data });
        };
        let reset = () => {
            setChips("one, two");
            setInput("Initial Value");
        };
        let controlledId = useId();
        let uncontrolledId = useId();
        let uncontrolledEmptyId = 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>
							<Input name="input" defaultValue="Initial Value"/>
						</Section>

						<Section>
							<Label htmlFor={uncontrolledId}>Uncontrolled Chips:</Label>
							<ChipsInput className={styledChipsInput} id={uncontrolledId} name="uncontrolled" defaultValue="one,two" validate={ChipSchema} onValidationError={(err) => { }} input={{
                validate: InputSchema,
                onValidationError: (err) => { },
            }} render={({ value, isFocus, onDelete }) => (<li>
										<span>
											{value} <RemoveChipButton onClick={onDelete}/>
										</span>
									</li>)}/>
						</Section>

						<Section>
							<Label htmlFor={uncontrolledEmptyId}>
								Uncontrolled Empty Chips:
							</Label>
							<ChipsInput className={styledChipsInput} id={uncontrolledEmptyId} name="uncontrolled" validate={ChipSchema} required onValidationError={(err) => { }} input={{
                validate: InputSchema,
                onValidationError: (err) => { },
            }} render={({ value, isFocus, onDelete }) => (<li>
										<span className={chip}>
											{value} <RemoveChipButton onClick={onDelete}/>
										</span>
									</li>)}/>
						</Section>
					</form>
				</section>

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

						<Section>
							<Input name="input" value={input} onChange={(e) => setInput(e.target.value)} validate={InputSchema} onValidationError={(err) => { }}/>
						</Section>

						<Section>
							<Label htmlFor={controlledId}>Controlled Chips</Label>
							<ChipsInput className={styledChipsInput} id={controlledId} name="controlled" value={chips} onChange={(e) => setChips(e.target.value)} render={({ value, isFocus, onDelete }) => (<span className={chip}>
										{value}{" "}
										<button type="button" onClick={onDelete}>
											X
										</button>
									</span>)}/>
						</Section>
					</form>
				</section>
			</div>);
    },
};