'use client';
import { useEffect, useState } from "react";
import PageLivingSpaceBuildsTableSection from "../tables/builds/page";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
import { IconPlus } from "@tabler/icons-react";
import { LivingSpaceDataTable } from "../tables/living-spaces/list/data-table";
import { useGraphQlLivingSpaceList } from "./queries";

const PageLivingSpaceList = () => {

    const router = useRouter();
    const [buildID, setBuildID] = useState<string | null>(null);
    const [isUserTypeEnabled, setIsUserTypeEnabled] = useState(false);
    const [page, setPage] = useState(1);
    const [limit, setLimit] = useState(10);
    const [sort, setSort] = useState({ createdAt: 'desc' });
    const [filters, setFilters] = useState({});

    useEffect(() => { console.log(`buildID: ${buildID} is changed.`) }, [buildID]);
    const additionButtons = <>
        <Button variant="outline" size="sm" onClick={() => { router.push("/living-spaces/add") }}>
            <IconPlus /><span className="hidden lg:inline">Add Living Space</span>
        </Button>
    </>
    const { data, isLoading, refetch } = useGraphQlLivingSpaceList(buildID || '', { limit, skip: (page - 1) * limit, sort, filters });
    const handlePageChange = (newPage: number) => { setPage(newPage) };
    const handlePageSizeChange = (newSize: number) => { setLimit(newSize); setPage(1) };

    return <>
        <div className="flex flex-col gap-2.5">
            <PageLivingSpaceBuildsTableSection buildID={buildID} setBuildID={setBuildID} setIsUserTypeEnabled={setIsUserTypeEnabled} additionButtons={additionButtons} />
            <h1 className="text-center justify-center">Living Space Added to selected Build with collectionToken: </h1><h1 className="text-center justify-center text-2xl font-bold">{buildID}</h1>
            {buildID && <LivingSpaceDataTable data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={handlePageChange} onPageSizeChange={handlePageSizeChange} refetchTable={refetch} buildID={buildID} />}
        </div>
    </>;
}

export { PageLivingSpaceList };