import { LstCard } from "@/components/extendedUI/LstCard";
import { useCardStore } from "@/lib/store/useCardStore";
import { getPPOO } from "@/utils/querys/logistics/getPPOO";
import { columns } from "@/utils/tableData/ppoo/ppooColumns";
import { PPOOTable } from "@/utils/tableData/ppoo/ppooData";
import { useQuery } from "@tanstack/react-query";
import { CircleX } from "lucide-react";
import { Suspense } from "react";
import { toast } from "sonner";

export default function PPOO({ style = {} }) {
    const { removeCard } = useCardStore();
    const { data, isError, isLoading } = useQuery(getPPOO());

    if (isLoading) return <div>Loading adjustmnet data...</div>;
    if (isError) {
        return (
            <div>
                <p>There was an error getting the adjustments.</p>
            </div>
        );
    }

    const handleCloseCard = () => {
        removeCard("PPOO");

        toast.success("card removed");
    };
    return (
        <div style={style}>
            <LstCard style={style}>
                <Suspense fallback={<p>Loading PPOO...</p>}>
                    <div className={`flex justify-center`}>
                        <p
                            className={`drag-handle w-fit`}
                            style={{ cursor: "move", padding: "5px" }}
                        >
                            PPOO
                        </p>

                        <button onClick={handleCloseCard}>
                            <CircleX />
                        </button>
                    </div>
                    <PPOOTable columns={columns} data={data} style={style} />
                </Suspense>
            </LstCard>
        </div>
    );
}