"use client";


import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";
import { lazy, Suspense, useState } from "react";
import { DialogCreateTools } from "./DialogCreateTool";
import { DialogCreateMaterials } from "./DialogCreateMaterial";
import { trpc } from "@/app/_trpc/client";
import { BrickWall, Hammer } from "lucide-react";
import Loading from "@/components/Loading";
import ErrorBoundary from "@/components/ErrorBoundary";
const MaterialList = lazy(()=>import("./MaterialsList"))
const DataTableTools = lazy(()=>import("./ToolList"))


const StockList = ({ searchParams }:{searchParams:Record<string,any>}) => {
  const [tab, setTab] = useState("materials");
 
  return (
    <div>

      <div className="">
        <Tabs defaultValue="materials" className=" w-full mt-10 ">
          <TabsList className=" w-full bg-transparent" asChild>
            <div className="flex  justify-between">
              <div>
                <TabsTrigger
                  value="materials"
                  name="materials"
                  className={cn(
                    "space-x-1 ",
                    tab === "materials" && "border-b-primary"
                  )}
                >
                  <BrickWall />
                   <span>Materiales</span>
                </TabsTrigger>
                <TabsTrigger
                  value="tools"
                  name="areas"
                  className={cn(
                    "space-x-1",
                    tab === "areas" && "border-b-primary"
                  )}
                >
                   <Hammer/>

                  <span>Herramientas</span>
                </TabsTrigger>
              </div>
            
            </div>
          </TabsList>
          <TabsContent
            value="materials"
            className="ml-1 w-full min-h-screen"
          >
            <div className="">
              <div className="flex justify-between items-center">
                
                  <h2 className="text-base md:text-xl font-bold capitalize pt-5 mb-5">
                    materiales
                  </h2>
                  <div>
                    <DialogCreateMaterials/>
                  </div>
              
              </div>

              <div>
                <ErrorBoundary>
                <Suspense fallback={<div className="grid place-content-center min-h-[50vh]"><Loading/></div>}>
                <MaterialList searchParams={searchParams}/>
                </Suspense>
                </ErrorBoundary>

              </div>
            </div>
          </TabsContent>
          <TabsContent
            value="tools"
            className="ml-1 w-full min-h-screen pt-5 space-y-10"
          >
            <div className=" justify-between items-center">
              <div className="flex justify-between">
                <div>
                  <h2 className="text-xl font-bold">Herramientas</h2>
                </div>
                <div>
                  <DialogCreateTools />
                </div>
              </div>
              <div>
              <ErrorBoundary>
              <Suspense fallback={<div className="grid place-content-center min-h-[50vh]"><Loading/></div>}>
              <DataTableTools  />
                </Suspense>
                </ErrorBoundary>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
};

export default StockList;