import { useCardStore } from "../../-lib/store/useCardStore";
import Quality from "../../quality/-components/WarehouseCard";
import INVCheckCard from "../logistics/warehouse/InventoryCard";
import OpenOrders from "../logistics/warehouse/openOrders";
import PPOO from "../logistics/warehouse/PPOOCard";

const componentsMap: any = {
	ppoo: PPOO,
	inv: INVCheckCard,
	openOrder: OpenOrders,
	qualityCard: Quality,
	//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>
					);
				}

				if (name === "qualityCard") {
					return (
						<div key={a.name} className="col-span-6">
							<Component />
						</div>
					);
				}
				//console.log(name.split("-")[0], a);
				return (
					<div key={a.name} className="col-span-3">
						<Component data={a} />
					</div>
				);
			})}
		</div>
	);
}