import WrapperManualTrigger from "@/components/ocme/WrapperCard";

import Lots from "./Lots";
import OcpLogs from "./OcpLogs";
import PrinterStatus from "./PrinterStatus";
import { useSettingStore } from "@/lib/store/useSettings";

import LabelLog from "./LabelLog";
import {
    ResizableHandle,
    ResizablePanel,
    ResizablePanelGroup,
} from "@/components/ui/resizable-panels";

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

    let server = settings.filter((n) => n.name === "server");

    return (
        <div className="ml-5 w-11/12 h-9/10">
            <ResizablePanelGroup
                direction="horizontal"
                //className="rounded-lg border"
                autoSaveId="ocpPage"
            >
                <ResizablePanel>
                    <ResizablePanelGroup direction="vertical">
                        <ResizablePanel>
                            <div style={{ overflow: "auto" }}>
                                <Lots />
                            </div>
                        </ResizablePanel>
                        <ResizableHandle />
                        <ResizablePanel>
                            <ResizablePanelGroup direction="horizontal">
                                <ResizablePanel className="overflow: auto">
                                    <div style={{ overflow: "auto" }}>
                                        <LabelLog />
                                    </div>
                                </ResizablePanel>
                                <ResizableHandle />
                                <ResizablePanel>
                                    <div style={{ overflow: "auto" }}>
                                        <OcpLogs />
                                    </div>
                                </ResizablePanel>
                            </ResizablePanelGroup>
                        </ResizablePanel>
                    </ResizablePanelGroup>
                </ResizablePanel>
                <ResizableHandle />
                <ResizablePanel defaultSize={25}>
                    <ResizablePanelGroup direction="vertical">
                        {server[0].value === "usday1vms006" && (
                            <ResizablePanel className="max-h-[300px]">
                                <WrapperManualTrigger />
                            </ResizablePanel>
                        )}
                        {server[0].value === "usday1vms006" && (
                            <ResizablePanel className="max-h-[300px]">
                                <WrapperManualTrigger />
                            </ResizablePanel>
                        )}

                        <ResizableHandle />
                        <ResizablePanel>
                            <PrinterStatus />
                        </ResizablePanel>
                    </ResizablePanelGroup>
                </ResizablePanel>
            </ResizablePanelGroup>
        </div>
    );
    // return (
    //     <div className="h-screen w-full ">
    //         <div className="flex flex-row 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">
    //                             <LabelLog />
    //                         </TabsContent>
    //                     </Tabs>
    //                 </div>
    //             </div>
    //             <div className="flex flex-col">
    //                 {server[0].value === "usday1vms006" && (
    //                     <div>
    //                         <WrapperManualTrigger />
    //                     </div>
    //                 )}
    //                 {server[0].value === "localhost" && (
    //                     <div>
    //                         <WrapperManualTrigger />
    //                     </div>
    //                 )}
    //                 <div>
    //                     <PrinterStatus />
    //                 </div>
    //             </div>
    //         </div>
    //     </div>
    // );
}
