"use client";

import { User } from "@/types/models";
import { CheckoutContentTypo } from "@/types";
import { useForm } from "react-hook-form";
import { useEffect } from "react";

import { BillingForm } from "./billing";
import { OrderSummary } from "./summary";
import { CheckoutFormData, defaultValues } from "./schema";

export function CheckoutContent({ checkout, user }: CheckoutContentTypo) {
    const form = useForm<CheckoutFormData>({
        defaultValues: {
            ...defaultValues,
            name: user?.my_full_name || "",
            first_name: user?.first_name || "",
            last_name: user?.fourth_name || "",
            email: user?.email || "",
            phone: user?.phone || "",
            national_id: user?.national_id_number || "",
        },
    });

    useEffect(() => {
        if (user) {
            form?.setValue("first_name", user?.first_name || "");
            form?.setValue("last_name", user?.fourth_name || "");
            form?.setValue("name", user?.my_full_name || "");
            form?.setValue("email", user?.email || "");

            form?.setValue("phone", user?.phone || "");
            form?.setValue("national_id", user?.national_id_number || "");
        }
    }, [user, form]);

    return (
        <div className="py-8 box">
            <div className="grid lg:grid-cols-3 gap-8">

                {/* billing - payment choose */}
                <div className="lg:col-span-2">
                    <BillingForm
                        form={form}
                        user={user as User}
                    />
                </div>

                {/* order summary */}
                <div className="lg:col-span-1">
                    <OrderSummary
                        checkout={checkout}
                        form={form}
                        user={user as User}
                    />
                </div>
            </div>
        </div>
    );
}