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

export default function Edit({ auth, user }: PageProps<{ user: IUser }>) {
    const { data, setData, patch, errors, processing } = useForm({
        full_name: user.full_name,
        email: user.email,
        is_admin: user.is_admin,
        phone_number: user.phone_number || "",
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();

        patch(route("admin.users.update", user.id));
    };

    return (
        <AuthenticatedLayout
            user={auth.user}
            header={"Felhasználó szerkesztése"}
            processing={processing}
        >
            <Head title="Felhasználó szerkesztése" />

            <div className="p-4 sm:p-8 bg-babolygo-ocean shadow sm:rounded-lg">
                <section>
                    <form onSubmit={submit} className="mt-6 space-y-6">
                        <div>
                            <InputLabel
                                htmlFor="full_name"
                                value="Teljes név"
                            />
                            <TextInput
                                id="full_name"
                                type="text"
                                className="mt-1 block w-full"
                                value={data.full_name}
                                onChange={(e) =>
                                    setData("full_name", e.target.value)
                                }
                            />
                            <InputError
                                className="mt-2"
                                message={errors.full_name}
                            />
                        </div>

                        <div>
                            <InputLabel htmlFor="email" value="E-mail cím" />
                            <TextInput
                                id="email"
                                type="email"
                                className="mt-1 block w-full"
                                value={data.email}
                                onChange={(e) =>
                                    setData("email", e.target.value)
                                }
                            />
                            <InputError
                                className="mt-2"
                                message={errors.email}
                            />
                        </div>

                        <div>
                            <InputLabel
                                htmlFor="phone_number"
                                value="Telefonszám"
                            />
                            <TextInput
                                id="phone_number"
                                type="text"
                                className="mt-1 block w-full"
                                value={data.phone_number}
                                onChange={(e) =>
                                    setData("phone_number", e.target.value)
                                }
                            />
                            <InputError
                                className="mt-2"
                                message={errors.phone_number}
                            />
                        </div>
                        <div>
                            <InputLabel
                                htmlFor="is_admin"
                                value="Admin jogosultság"
                            />
                            <Checkbox
                                name="remember"
                                checked={data.is_admin}
                                onChange={(e) =>
                                    setData("is_admin", e.target.checked)
                                }
                            />
                            <InputError
                                message={errors.is_admin}
                                className="mt-2"
                            />
                        </div>

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