import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { IUser, PageProps } from "@/types";
import InputLabel from "@/Components/InputLabel";
import TextInput from "@/Components/TextInput";
import { Head, useForm } from "@inertiajs/react";
import InputError from "@/Components/InputError";
import PrimaryButton from "@/Components/PrimaryButton";
import SelectInput from "@/Components/SelectInput";

export interface IPriceCategory {
    id: number;
    name: string;
}

export default function Create({
    auth,
    users,
    priceCategories,
}: PageProps<{ users: IUser[]; priceCategories: IPriceCategory[] }>) {
    const { data, setData, post, processing, errors, reset } = useForm({
        full_name: "",
        active_from: "",
        active_to: "",
        user_id: "",
        price_category_id: "",
    });

    const pirceCategoriesOpions = priceCategories.map((priceCat) => ({
        value: priceCat.id,
        label: priceCat.name,
    }));

    const userOptions = users.map((user) => ({
        value: user.id,
        label: user.full_name,
    }));

    function handleSubmit(e: any) {
        e.preventDefault();
        post(route("admin.kids.store"));
    }

    return (
        <AuthenticatedLayout user={auth.user} header={"Gyerek létrehozás"} processing={processing}>
            <Head title="Gyerek létrehozás" />

            <form onSubmit={handleSubmit} className="space-y-6 m-2">
                <div className="max-w-7xl mx-auto p-6 bg-babolygo-ocean rounded-lg shadow-md">
                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 ">
                        <div>
                            <InputLabel
                                htmlFor="full_name"
                                value="Teljes név"
                            />
                            <TextInput
                                id="full_name"
                                type="text"
                                name="full_name"
                                className="mt-1 block w-full"
                                value={data.full_name}
                                onChange={(e) =>
                                    setData("full_name", e.target.value)
                                }
                            />
                            <InputError
                                message={errors.full_name}
                                className="mt-2"
                            />
                        </div>

                        <div>
                            <InputLabel
                                htmlFor="active_from"
                                value="Aktív ettől"
                            />
                            <TextInput
                                id="active_from"
                                type="date"
                                name="active_from"
                                className="mt-1 block w-full"
                                value={data.active_from}
                                onChange={(e) =>
                                    setData("active_from", e.target.value)
                                }
                            />
                            <InputError
                                message={errors.active_from}
                                className="mt-2"
                            />
                        </div>

                        <div>
                            <InputLabel
                                htmlFor="active_to"
                                value="Aktív eddig"
                            />
                            <TextInput
                                id="active_to"
                                type="date"
                                name="active_to"
                                className="mt-1 block w-full"
                                value={data.active_to}
                                onChange={(e) =>
                                    setData("active_to", e.target.value)
                                }
                            />
                            <InputError
                                message={errors.active_to}
                                className="mt-2"
                            />
                        </div>
                        <div>
                            <InputLabel
                                htmlFor="select"
                                value="Szülő kiválasztása"
                            />
                            <SelectInput
                                id="user"
                                name="user_id"
                                value={data.user_id}
                                className="mt-1 block w-full"
                                onChange={(e) =>
                                    setData("user_id", e.target.value)
                                }
                                options={userOptions}
                            />
                            <InputError
                                message={errors.user_id}
                                className="mt-2"
                            />
                        </div>
                        <div>
                            <InputLabel
                                htmlFor="select"
                                value="Árkategória kiválasztása"
                            />
                            <SelectInput
                                id="price_category"
                                name="price_category"
                                value={data.price_category_id}
                                className="mt-1 block w-full"
                                onChange={(e) =>
                                    setData("price_category_id", e.target.value)
                                }
                                options={pirceCategoriesOpions}
                            />
                            <InputError
                                message={errors.price_category_id}
                                className="mt-2"
                            />
                        </div>
                    </div>

                    <div className="flex items-center justify-end mt-6">
                        <PrimaryButton
                            className="w-full sm:w-auto"
                            disabled={processing}
                        >
                            Mentés
                        </PrimaryButton>
                    </div>
                </div>
            </form>
        </AuthenticatedLayout>
    );
}
