---
import config from "@/config/config.json" assert { type: "json" };
import ImageMod from "../ImageMod.astro";
const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;

const { src, srcDarkmode }: { src?: string; srcDarkmode?: string } =
    Astro.props;

const theme_switcher = config.settings.theme_switcher;
const {
    logo,
    logo_darkmode,
    logo_width,
    logo_height,
    logo_text,
    title,
}: {
    logo: string;
    logo_darkmode: string;
    logo_width: any;
    logo_height: any;
    logo_text: string;
    title: string;
} = config.site;

const logoSrc = src ? src : logo;
const logoDarkSrc = srcDarkmode ? srcDarkmode : logo_darkmode;
const base = import.meta.env.BASE_URL.replace(/\/$/, "");
const isPublicPath = (p: string) => p.startsWith("/");
const withBase = (p: string) => isPublicPath(p) ? `${base}${p}` : p;
const w = logo_width.replace("px", "");
const h = logo_height.replace("px", "");
---

<a href={siteTitleHref} class="navbar-brand inline-block">
    {
        logoSrc || logoDarkSrc ? (
            <>
                {isPublicPath(logoSrc) ? (
                    <img
                        src={withBase(logoSrc)}
                        class={`inline-block ${theme_switcher && "dark:hidden"}`}
                        alt={title}
                        width={w}
                        height={h}
                        style={{ height: h + "px", width: w + "px", objectFit: "contain" }}
                    />
                ) : (
                    <ImageMod
                        src={logoSrc}
                        class={`inline-block  ${theme_switcher && "dark:hidden"}`}
                        width={Number(w) * 2}
                        height={Number(h) * 2}
                        alt={title}
                        style={{ height: h + "px", width: w + "px", objectFit: "contain" }}
                        format="webp"
                    />
                )}

                {theme_switcher && (
                    isPublicPath(logoDarkSrc) ? (
                        <img
                            src={withBase(logoDarkSrc)}
                            class="hidden dark:inline-block"
                            alt={title}
                            width={w}
                            height={h}
                            style={{ height: h + "px", width: w + "px", objectFit: "contain" }}
                        />
                    ) : (
                        <ImageMod
                            src={logoDarkSrc}
                            class="hidden dark:inline-block"
                            width={Number(w) * 2}
                            height={Number(h) * 2}
                            alt={title}
                            style={{ height: h + "px", width: w + "px", objectFit: "contain" }}
                            format="webp"
                        />
                    )
                )}
            </>
        ) : logo_text ? (
            logo_text
        ) : (
            siteTitle || title
        )
    }
</a>
