'use client';

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import RGPDForm from "./RGPDForm";
import { useRGPD } from "../../../../app/hooks/useRGPD";
import { useRGPDDetails } from "../../../../app/hooks/useRGPDDetails";
import { useRGPDForm } from "../../../../app/hooks/useRGPDForm";
import Link from "next/link";

interface Props {
    id: string;
}

export function RGPDEdit({ id }: Props) {
    const router = useRouter();

    const { request } = useRGPDDetails(id);

    const { updateRequest } = useRGPD();

    const { formData, setFormData, updateField } = useRGPDForm();

    useEffect(() => {
        if (!request) return;

        setFormData({
            usager_id: request.usager_id,
            type: request.type,
            canal: request.canal,
            description_demande: request.description_demande ?? "",
            date_reception: request.date_reception,
            date_limite: request.date_limite ?? ""
        });
    }, [request]);

    async function handleSubmit() {
        await updateRequest(Number(id), formData);

        router.push(`/admin/rgpd/${id}`);
    }

    if (!request) return null;

    return (
        <div className="space-y-1.5 p-3">

            <div className="flex gap-3">

                <Link
                    href="/admin/rgpd"
                    className="
          px-1 py-1 rounded-xl
          bg-white border border-[#dce8e2]
          text-[#2f5d4b]
        "
                >
                    ← Retour liste demandes
                </Link>
            </div>

            <h1 className="text-3xl font-bold text-[#2f5d4b]">
                Modifier la demande RGPD
            </h1>

            <RGPDForm
                formData={formData}
                updateField={updateField}
                onSubmit={handleSubmit}
            />

        </div>
    );
}