import { useLabContext } from "@/components/labs/context";
import { LabResourcesTable } from "@/components/labs/lab-resources-table";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { useLocaleFunction } from "@/hooks/use-localed";

export function LabResourcesDialog() {
  const t = useLocaleFunction();
  const {
    resources: resourcesList,
    resourcesDialogOpen,
    onResourcesDialogOpenChanged,
  } = useLabContext();

  const resources = resourcesList?.[0]?.resources ?? [];

  return (
    <Dialog
      open={resourcesDialogOpen}
      onOpenChange={onResourcesDialogOpenChanged}
    >
      <DialogContent className="lg:max-w-(--breakpoint-md) xl:max-w-(--breakpoint-lg) 2xl:max-w-(--breakpoint-xl)">
        <DialogHeader>
          <DialogTitle>{t("lab.resources.title")}</DialogTitle>
          <DialogDescription className="sr-only" />
        </DialogHeader>
        <LabResourcesTable resources={resources} />
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="secondary">{t("common.close")}</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}