'use client'
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Kanban, ListTree } from "lucide-react";
import ErrorBoundary from "@/components/ErrorBoundary";
import { lazy, Suspense } from "react";
import TasksListSkeleton from "./TaskListSkeleton";
import DialogCreateTask from "@/components/tasks/DialogCreateTask";
import Loading from "@/components/Loading";
import { EmplyPlaceHolder, EmptyContent, EmptyIcon, EmptyTitle } from "@/components/EmplyPlaceHolder";

const TaskListTable = lazy(()=>import("./TaskListTable"))
const TaskListCanvas = lazy(()=>import( "./TaskListCanvas"))

const ErrorTasksFallback=()=>{
  return (
    <div className="min-h-[60vh] grid place-content-center">
            <EmplyPlaceHolder>
          <EmptyIcon iconName="error" />
          <EmptyTitle className="text-base">Ocurrió un error</EmptyTitle>
          <EmptyContent className="text-xs">
            Por favor, revisa tu conexión a internet o intenta más tarde.
          </EmptyContent>
        </EmplyPlaceHolder>
          </div>
  )
}

const TaskList = ({ searchParams }: { searchParams: Record<string, any> }) => {

  return (
    <div className="space-y-10 ">
      <Tabs className=" w-full mt-5 " defaultValue="list">
        <TabsList className="bg-transparent w-full" asChild>
          <div className="flex justify-between ">
            <div>
              <TabsTrigger value="list" name="list">
                <div className="flex gap-1 items-center">
                  <ListTree />
                  <p>Lista</p>
                </div>
              </TabsTrigger>
              <TabsTrigger value="canvas" name="canvas">
                <div className="flex gap-1 items-center">
                  <Kanban />
                  <p>Kanvan</p>
                </div>
              </TabsTrigger>
            </div>
            <div className="flex gap-3">
           
            <DialogCreateTask />
          
            </div>
          </div>
        </TabsList>
        <TabsContent value="list" className=" w-full min-h-80vh px-1">
          <ErrorBoundary fallback={<ErrorTasksFallback/>}>
            <Suspense key={`${searchParams?.q}`} fallback={<TasksListSkeleton />}>
              <TaskListTable searchParams={searchParams} />
            </Suspense>
          </ErrorBoundary>
        </TabsContent>
        <TabsContent value="canvas" className=" w-full min-h-80vh px-2  ">
          <ErrorBoundary fallback={<ErrorTasksFallback/>}>
            <Suspense key={`${searchParams?.q}`} fallback={<div className="grid place-content-center min-h-[60vh]"><Loading/></div>}>
              <TaskListCanvas searchParams={searchParams} />
            </Suspense>
          </ErrorBoundary>
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default TaskList;