import { Outlet, useMatch, useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";

import { VocabularyList } from "./vocabulary-list";
import { DetailDrawer } from "../components/detail-drawer";
import { useMediaQuery } from "../lib/use-media-query";
import { useDocumentTitle } from "../lib/use-document-title";
import { useBreadcrumb } from "../shell/use-breadcrumb";
import { PageTitle } from "@/components/ui/page-title";

export function VocabulariesPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const detailMatch = useMatch("/vocabularies/:id");
  const open = Boolean(detailMatch);
  const isWide = useMediaQuery("(min-width: 1024px)");

  useDocumentTitle(t("nav.vocabularies"));
  useBreadcrumb([{ label: t("nav.vocabularies") }]);

  const close = () => navigate("/vocabularies");

  return (
    <div className="flex h-full flex-col">
      <PageTitle className="px-4 pt-4 pb-2">{t("nav.vocabularies")}</PageTitle>
      {isWide ? (
        <div className="grid flex-1 grid-cols-[20rem_1fr] overflow-hidden">
          <div className="overflow-hidden border-r">
            <VocabularyList />
          </div>
          <div className="overflow-hidden">
            <Outlet />
          </div>
        </div>
      ) : (
        <div className="flex-1 overflow-hidden">
          <VocabularyList />
        </div>
      )}
      {!isWide && open && (
        <DetailDrawer open={open} onClose={close} ariaLabel={t("vocab.terms")}>
          <Outlet />
        </DetailDrawer>
      )}
    </div>
  );
}