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();

    if (settings.length === 0) return;
    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
                            style={{
                                overflow: "auto",
                                scrollbarWidth: "none",
                            }}
                        >
                            <Lots />
                        </ResizablePanel>
                        <ResizableHandle />
                        <ResizablePanel>
                            <ResizablePanelGroup
                                direction="horizontal"
                                autoSaveId="ocpPage"
                            >
                                <ResizablePanel
                                    //className="text-sm p-4 overflow-scroll"
                                    style={{
                                        overflow: "auto",
                                        scrollbarWidth: "none",
                                    }}
                                >
                                    <LabelLog />
                                </ResizablePanel>
                                <ResizableHandle />
                                <ResizablePanel
                                    style={{
                                        overflow: "auto",
                                        scrollbarWidth: "none",
                                    }}
                                >
                                    <OcpLogs />
                                </ResizablePanel>
                            </ResizablePanelGroup>
                        </ResizablePanel>
                    </ResizablePanelGroup>
                </ResizablePanel>
                <ResizableHandle />
                <ResizablePanel className="min-h-[200px] min-w-[200px] max-w-[450px]">
                    <ResizablePanelGroup
                        direction="vertical"
                        autoSaveId="ocpPage_vert"
                    >
                        {server[0].value === "usday1vms006" && (
                            <ResizablePanel
                                style={{
                                    overflow: "auto",
                                    scrollbarWidth: "none",
                                }}
                                defaultSize={50}
                                className="min-h-[200px]"
                            >
                                <WrapperManualTrigger />
                            </ResizablePanel>
                        )}
                        {server[0]?.value === "localhost" && (
                            <ResizablePanel
                                className="min-h-[200px]"
                                style={{
                                    overflow: "auto",
                                    scrollbarWidth: "none",
                                }}
                                defaultSize={50}
                            >
                                <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>
    // );
}