'use client';

import UserReservationFormComponent from "@/components/user-reservation/UserReservationFormComponent";
import DefaultLayout from "@/masterLayout/DefaultLayout";
import { useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
import client from "@auth";
import PageLoader from "@/components/common-component/PageLoader";
import { setThemeColor } from "@utils/CommonFunction";

const PageInner = () => {
    const searchparams = useSearchParams();
    const RestaurantBranch = searchparams.get('restaurantbranch');
    // alert(RestaurantBranch)
    const [userData, setUserData] = useState(null);

    useEffect(() => {
        if (RestaurantBranch) {
            getRestaruntData();
        }
    }, [RestaurantBranch]);

    const getRestaruntData = async () => {
        try {
            const res = await client.get(
                `/Dine360%20Restaurant%20Branch%20Link?fields=["name","branch","restaurant","logo_url","title","slogan","isemail","issms","thankyoumessageinreservation","colorcode"]&filters=[["name","=","${RestaurantBranch}"]]`
            );
            const data = res.data.data;
            setUserData(data);

            if (data[0]?.colorcode) {
                localStorage.setItem("colorCode", data[0].colorcode);
                setThemeColor();
            }

        } catch (error) {
            console.log("error", error);
        }
    };

    if (!userData) return <PageLoader />;

    const logoUrl = userData?.[0]?.logo_url
        ? `${userData[0].logo_url}`
        : "/images/default-logo.png";

    return (
        <DefaultLayout logo={logoUrl}>
            <UserReservationFormComponent restaurantbranch={RestaurantBranch} />
        </DefaultLayout>
    );
};

const Page = () => (
    <Suspense fallback={<PageLoader />}>
        <PageInner />
    </Suspense>
);

export default Page;
