"use client"
import DashBoardLayerOne from "@/components/DashBoardLayerOne";
import FloorComponent from "@/components/floor-component/FloorComponent";
import MainComponent from "@/components/home/MainComponent";
import MasterLayout from "@/masterLayout/MasterLayout";
import { useEffect, useState } from "react";
import client from "@auth";
import PageLoader from "@/components/common-component/PageLoader";
import PageNoData from "@/components/common-component/PageNoData";
import Breadcrumb from "@/components/Breadcrumb";
import { useParams } from "next/navigation";

// export const metadata = {
//   title: "WowDash NEXT JS - Admin Dashboard Multipurpose Bootstrap 5 Template",
//   description:
//     "Wowdash NEXT JS is a developer-friendly, ready-to-use admin template designed for building attractive, scalable, and high-performing web applications.",
// };

const FloorPage = () => {
    // const params = useParams();
    // const restaurantbranch = params?.restaurantbranch;
    // const RestaruntBranch = restaurantbranch
    const [floorData, setFloorData] = useState(null);
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(true);

    // const [floors, setFloors] = useState([]);

    // useEffect(() => {
    //   var API_KEY = "482beca79d9c005";
    //   var API_SECRET = "b8778f51fcca82b";
    //   var authHeader = `token ${API_KEY}:${API_SECRET}`;

    //   fetch("http://82.25.105.135:8004/api/resource/Dine360 Floor?fields=[\"*\"]&limit_page_length=100", {
    //     headers: {
    //       Authorization: authHeader,
    //     },
    //   })
    //     .then((res) => res.json())
    //     .then((data) => {
    //       setFloors(data.data);
    //       console.log("data", data.data);
    //     })
    //     .catch((err) => console.error(err));
    // }, []);


    const [restaruntBranch, setRestaruntBranch] = useState("")

    useEffect(() => {
        const restarunt = localStorage.getItem("restaurantbranch")
        setRestaruntBranch(restarunt)
    }, [])


    useEffect(() => {
        if (restaruntBranch && restaruntBranch !== "")
            getFloor();
    }, [restaruntBranch]);



    const getFloor = async () => {
        try {
            setLoading(true);
            // const res = await client?.get(`/Dine360 Floor?fields=[\"*\"]&limit_page_length=100`);
            const res = await client?.get(`/Dine360 Floor?fields=[\"*\"]&limit_page_length=100&filters=[["restaurantbranch","=","${restaruntBranch}"]]`);
            setFloorData(res?.data?.data);
        } catch (error) {
            console.error("Error fetching floor data:", error);
            setError(error?.message || "Failed to fetch floor data");
        } finally {
            setLoading(false);
        }
    };

    console.log("floorData", floorData);
    return (
        <>
            {/* MasterLayout */}
            <MasterLayout>
                {/* Breadcrumb */}
                <Breadcrumb title='Floor' />

                {loading ? (
                    <PageLoader />
                ) : (
                    <FloorComponent floorData={floorData} getFloor={getFloor} />
                )
                }
            </MasterLayout>

            {/* Render your floor data here */}
            {/* {floorData && (
        <pre>{JSON.stringify(floorData, null, 2)}</pre>
      )} */}
        </>
    );
};

export default FloorPage;
