// * Packages
import { usePage } from "@inertiajs/react";
import { ReactNode } from "react";
// * Other
import { AppEnv } from "@/types/global";
import { TranslationField } from "@/back/types/i18n";
import useTrans from "@/hooks/use-translations";
import str from "@/hooks/use-string";

const PREVIEW_LENGTH = 50;

function normalizePreview(value: string): string {
  return str(value).normalize().value().substring(0, PREVIEW_LENGTH);
}

function useGetTranslationValue(
  value?: TranslationField,
): { value: string; locale?: string } | null {
  const { appEnv } = usePage().props as unknown as { appEnv: AppEnv };

  if (!value) return null;

  const local = value[appEnv.locale];
  if (local) return { value: local };

  const fallback = Object.entries(value).find(([, v]) => v?.trim());
  if (!fallback) return null;

  return { value: fallback[1], locale: fallback[0] };
}

function RenderValue({ value, renderHtml }: { value: string; renderHtml: boolean }): ReactNode {
  const preview = normalizePreview(value);

  return renderHtml ? (
    // eslint-disable-next-line react/no-danger
    <p dangerouslySetInnerHTML={{ __html: preview }} />
  ) : (
    preview
  );
}

export default function RenderTranslationCell({
  value,
  renderHtml = false,
}: {
  value?: TranslationField;
  renderHtml?: boolean;
}): ReactNode {
  const result = useGetTranslationValue(value);
  const notKnown = useTrans("uwil-i18n::trans.value_not_known");

  if (!result) {
    return <p className="text-muted-foreground italic m-0">{notKnown}</p>;
  }

  if (!result.locale) {
    return <RenderValue value={result.value} renderHtml={renderHtml} />;
  }

  return (
    <span className="italic text-xs">
      <span className="text-muted-foreground mr-1">{result.locale}:</span>
      <RenderValue value={result.value} renderHtml={renderHtml} />
    </span>
  );
}