import { CompaniesWorkspace } from "@metis/companies/client";
import { IdentityWorkspace, identityApi, identityKeys } from "@metis/identity/client";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@repo/shadcn-ui/components/select";
import { useQuery } from "@tanstack/react-query";
import { useId, useState } from "react";
import { useTranslation } from "react-i18next";

function LanguageSwitcher() {
  const { t, i18n } = useTranslation("core");
  const languageOptions = ["es", "en"].map((value) => ({
    value,
    label: t(`languageNames.${value}`),
  }));
  const [languageError, setLanguageError] = useState(false);
  const languageLabelId = useId();

  return (
    <div className="desk-language">
      <div className="flex items-center gap-3 text-sm text-muted-foreground">
        <span id={languageLabelId}>{t("language")}</span>
        <Select
          items={languageOptions}
          onValueChange={(language) => {
            if (language !== "es" && language !== "en") {
              return;
            }
            setLanguageError(false);
            i18n
              .changeLanguage(language)
              .then(() => {
                document.documentElement.lang = i18n.resolvedLanguage ?? "es";
              })
              .catch(() => setLanguageError(true));
          }}
          value={i18n.resolvedLanguage ?? "es"}
        >
          <SelectTrigger aria-labelledby={languageLabelId} className="min-w-28">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {languageOptions.map((language) => (
              <SelectItem key={language.value} value={language.value}>
                {language.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {languageError && (
        <p className="text-destructive" role="alert">
          {t("languageError")}
        </p>
      )}
    </div>
  );
}

export function App() {
  const session = useQuery({
    queryKey: identityKeys.session,
    queryFn: identityApi.session,
    retry: false,
  });
  return (
    <div className="desk-app">
      {!session.data?.user && (
        <header className="desk-login-header">
          <strong>Metis Desk</strong>
          <LanguageSwitcher />
        </header>
      )}
      <IdentityWorkspace
        renderWorkspace={(snapshot, accountNavigation) => (
          <CompaniesWorkspace
            accountNavigation={accountNavigation}
            csrfToken={snapshot.csrfToken}
            languageSwitcher={<LanguageSwitcher />}
            userName={snapshot.user?.name ?? ""}
          />
        )}
      >
        {null}
      </IdentityWorkspace>
    </div>
  );
}