import { useCardStore } from "@/lib/store/useCardStore";
import { useForm } from "@tanstack/react-form";
import { Label } from "../ui/label";
import { Checkbox } from "../ui/checkbox";
import { Input } from "../ui/input";
// import {
//     Select,
//     SelectContent,
//     SelectGroup,
//     SelectItem,
//     SelectLabel,
//     SelectTrigger,
//     SelectValue,
// } from "../ui/select";
import { Button } from "../ui/button";

export default function Cards(card: any) {
    const { addCard, removeCard, cards } = useCardStore();
    let existing: any = cards.filter((n: any) => n.name === card.name);

    //console.log(existing);
    const form = useForm({
        defaultValues: {
            name: existing[0]?.name || card.name,
            rowType: existing[0]?.type ?? card.rowType,
            age: existing[0]?.age ?? 90,
            active: existing[0]?.active ?? false,
        },
        onSubmit: async ({ value }) => {
            console.log(value);
            const testCard: any = cards.filter(
                (i: any) => i.name === value.name
            );

            if (value.active) {
                const newCard = {
                    name: `${value.name}`,
                    rowType: value.rowType,
                    age: value.age ?? 90,
                    active: value.active,
                };
                if (testCard.length > 0) {
                    removeCard(value.name);
                    addCard(newCard);
                    return;
                }
                // change the name for a type card

                addCard(newCard);
            } else {
                removeCard(value.name);
            }
        },
    });
    return (
        <div className="border-solid border-2 m-2">
            <p>{card.name}</p>
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                }}
                className="flex flex-row"
            >
                <form.Field
                    name="active"
                    // validators={{
                    //     // We can choose between form-wide and field-specific validators
                    //     onChange: ({ value }) =>
                    //         value.length > 3
                    //             ? undefined
                    //             : "Username must be longer than 3 letters",
                    // }}
                    children={(field) => {
                        return (
                            <div className="m-2 p-2 flex flex-row">
                                <div>
                                    <Label htmlFor="active">
                                        <span>Active</span>
                                    </Label>
                                </div>

                                <Checkbox
                                    className="ml-2"
                                    name={field.name}
                                    onBlur={field.handleBlur}
                                    checked={field.state.value}
                                    onCheckedChange={(e) =>
                                        field.handleChange(e)
                                    }
                                />
                            </div>
                        );
                    }}
                />
                {!card.inventory && (
                    <>
                        <form.Field
                            name="age"
                            // validators={{
                            //     // We can choose between form-wide and field-specific validators
                            //     onChange: ({ value }) =>
                            //         value.length > 3
                            //             ? undefined
                            //             : "Username must be longer than 3 letters",
                            // }}
                            children={(field) => {
                                return (
                                    <div className="m-2 min-w-48 p-2">
                                        <Label htmlFor="active" className="">
                                            Age
                                        </Label>
                                        <Input
                                            name={field.name}
                                            onBlur={field.handleBlur}
                                            value={field.state.value}
                                            type="number"
                                            onChange={(e) =>
                                                field.handleChange(
                                                    e.target.value
                                                )
                                            }
                                        />
                                    </div>
                                );
                            }}
                        />

                        {/* <form.Field
                            name="rowType"
                            //listeners={{onChange: ({value})=>{}}}
                            children={(field) => {
                                return (
                                    <div className="m-2 min-w-48 max-w-96 p-2">
                                        <Label htmlFor={field.name}>
                                            Row Type
                                        </Label>
                                        <Select
                                            value={field.state.value}
                                            onValueChange={field.handleChange}
                                        >
                                            <SelectTrigger className="w-[180px]">
                                                <SelectValue
                                                    id={field.name}
                                                    placeholder="Select Role"
                                                />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectGroup>
                                                    <SelectLabel>
                                                        Row Type
                                                    </SelectLabel>
                                                    <SelectItem value="empty">
                                                        Empty
                                                    </SelectItem>
                                                    <SelectItem value="fg">
                                                        Finished Goods
                                                    </SelectItem>
                                                    <SelectItem value="materials">
                                                        Materials
                                                    </SelectItem>
                                                    <SelectItem value="waste">
                                                        Waste
                                                    </SelectItem>
                                                    <SelectItem value="packaging">
                                                        Packaging
                                                    </SelectItem>
                                                </SelectGroup>
                                            </SelectContent>
                                        </Select>
                                    </div>
                                );
                            }}
                        /> */}
                    </>
                )}
                <div className="mt-7">
                    <Button type="submit" onClick={() => form.handleSubmit()}>
                        Save Card
                    </Button>
                </div>
            </form>
        </div>
    );
}