import WrapperManualTrigger from "@/components/ocme/WrapperCard";
import LabelLog from "./LabelLog";
import Lots from "./Lots";
import OcpLogs from "./OcpLogs";
import PrinterStatus from "./PrinterStatus";
import { useSettingStore } from "@/lib/store/useSettings";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function OCPPage() {
    const { settings } = useSettingStore();

    const server = settings.filter((n) => n.plantToken === "usday1");
    return (
        <div className="h-screen w-full ">
            <div className="flex flex-wrap gap-2">
                <div className="flex flex-col w-4/5 h-dvh">
                    <div className="">
                        <Lots />
                    </div>

                    <div className="w-5/6 h-1/2">
                        <Tabs defaultValue="ocplogs" className="w-full">
                            <TabsList className="grid w-full grid-cols-2">
                                <TabsTrigger value="ocplogs">
                                    OcpLogs
                                </TabsTrigger>
                                <TabsTrigger value="labels">Labels</TabsTrigger>
                            </TabsList>
                            <TabsContent value="ocplogs">
                                <div className="w-full">
                                    <OcpLogs />
                                </div>
                            </TabsContent>
                            <TabsContent value="labels">
                                <div className="w-full">
                                    <LabelLog />
                                </div>
                            </TabsContent>
                        </Tabs>
                    </div>
                </div>
                <div className="w-1/6 flex flex-col">
                    {server && (
                        <div>
                            <WrapperManualTrigger />
                        </div>
                    )}
                    <div>
                        <PrinterStatus />
                    </div>
                </div>
            </div>
        </div>
    );
}