import { useCardStore } from "@/lib/store/useCardStore";
import INVCheckCard from "../logistics/warehouse/InventoryCard";
import PPOO from "../logistics/warehouse/PPOOCard";
import OpenOrders from "../logistics/warehouse/openOrders";

const componentsMap: any = {
    ppoo: PPOO,
    inv: INVCheckCard,
    openOrder: OpenOrders,
    //QualityRequest,
};

export default function DashBoard() {
    const { cards } = useCardStore();

    //console.log(cards);
    return (
        <div className="ml-5 w-11/12 h-9/10 grid grid-cols-12 gap-1">
            {cards.map((a: any) => {
                const name = a.name; //.filter((c) => c.i === card.i)[0].i || "name";

                const Component = componentsMap[name.split("-")[0]];
                if (name === "openOrder") {
                    return (
                        <div key={a.name} className="col-span-6">
                            <Component age={a.age} type={a.rowType} />
                        </div>
                    );
                } else {
                    return (
                        <div key={a.name} className="col-span-3">
                            <Component age={a.age} type={a.rowType} />
                        </div>
                    );
                }
            })}
        </div>
    );

    // return (
    //     <div className="ml-5 w-11/12 h-9/10 grid grid-cols-12 gap-1">
    //         <div className="col-span-3">
    //             <PPOO />
    //         </div>
    //         <div className="col-span-3">
    //             <INVCheckCard age={90} type={"empty"} />
    //         </div>
    //         <div className="col-span-3">
    //             <INVCheckCard age={75} type={"fg"} />
    //         </div>
    //         <div className="col-span-3">
    //             <INVCheckCard age={30} type={"materials"} />
    //         </div>
    //         <div className="col-span-3">
    //             <INVCheckCard age={7} type={"waste"} />
    //         </div>
    //         <div className="col-span-3">
    //             <INVCheckCard age={7} type={"packaging"} />
    //         </div>
    //     </div>
    // );
}

/*
<div className="col-span-3">
                <PPOO />
            </div>
            <div className="col-span-3">
                <INVCheckCard age={30} type={"empty"} />
            </div>
            <div className="col-span-3">
                <INVCheckCard age={30} type={"fg"} />
            </div>
            <div className="col-span-3">
                <INVCheckCard age={30} type={"materials"} />
            </div>
            <div className="col-span-3">
                <INVCheckCard age={30} type={"waste"} />
            </div>
            <div className="col-span-3">
                <INVCheckCard age={30} type={"packaging"} />
            </div>
*/