import { Link, usePage } from "@inertiajs/react";

import logoUwilCMSDark from "&/images/logos/uwil-cms-dark.svg";
import logoTinyUwilCMS from "&/images/logos/uwil-cms-light-icon.svg";
import logoUwilCMSLight from "&/images/logos/uwil-cms-light.svg";
import { useTheme } from "@/back/providers/ThemeProvider";
import type { ConfigBackend } from "@/back/types/global";

interface ApplicationLogoProps {
  forceLight?: boolean;
  isCollapsed?: boolean;
}

/**
 * Get the logo.
 *
 * @param isCollapsed boolean
 * @param forceLight boolean
 * @param theme string
 * @return string
 */
function getLogo(isCollapsed: boolean, forceLight: boolean, theme: string) {
  if (isCollapsed) return logoTinyUwilCMS;
  if (forceLight || theme === "dark") return logoUwilCMSLight;
  return logoUwilCMSDark;
}

export default function ApplicationLogo({
  forceLight = false,
  isCollapsed = false,
}: Readonly<ApplicationLogoProps>) {
  const { routes } = usePage().props.configBackend as ConfigBackend;
  const { theme } = useTheme();
  const wrapperClasses = isCollapsed ? "h-8" : "w-full max-w-[10rem] mx-auto";
  const logo = getLogo(isCollapsed, forceLight, theme);

  return (
    <Link
      href={route(`${routes.name}dashboard.index`)}
      className={`${wrapperClasses} rounded-md ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`}
    >
      <img
        src={logo}
        alt="UWIL CMS logo"
        className={`w-auto mx-auto ${isCollapsed ? "h-full" : "max-h-full"}`}
      />
    </Link>
  );
}