"use client";
import ErrorBoundary from "@/components/ErrorBoundary";
import { lazy, Suspense, useMemo, useState } from "react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import TeamRecentlyModified from "./TeamRecentlyModified";
import TeamTasksList from "./TeamTasksList";
import Loading from "@/components/Loading";
import dynamic from "next/dynamic";
const FilterTasksByState = dynamic(
  () => import("@/components/tasks/FilterTasksByState"),
  { ssr: false }
);

const TeamPage = () => {
  const [teamTaskIsOpen, setTeamTaskIsOpen] = useState<string[]>(["team", "recentlyModified"]);

  return (
    <div >
      <div className="">
        <Suspense>
          <FilterTasksByState />
        </Suspense>
        <Accordion
          onValueChange={setTeamTaskIsOpen}
          type="multiple"
          defaultValue={["team", "recentlyModified"]}
          className="w-full"
        >
          <AccordionItem value="team">
            <AccordionTrigger className="text-xl">
            <h4 className="gap-5 flex items-center">
                <span>Equipo</span>{" "}
                {!teamTaskIsOpen.includes("team") && (
                  <span className="text-xs font-light">
                    Expande para ver tareas ↓
                  </span>
                )}
              </h4>
            </AccordionTrigger>
            <AccordionContent>
              <ErrorBoundary>
                <Suspense fallback={<Loading />}>
                  <TeamTasksList />
                </Suspense>
              </ErrorBoundary>{" "}
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="recentlyModified">
            <AccordionTrigger className=" md:text-xl">
              <h4 className="gap-5 flex items-center">
                <span>Recientemente modificadas</span>{" "}
                {!teamTaskIsOpen.includes("recentlyModified") && (
                  <span className="text-xs font-light">
                    Expande para ver tareas ↓
                  </span>
                )}
              </h4>
            </AccordionTrigger>
            <AccordionContent>
              <ErrorBoundary>
                <Suspense fallback={<Loading />}>
                  <TeamRecentlyModified />
                </Suspense>
              </ErrorBoundary>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
    </div>
  );
};

export default TeamPage;