import type { SitePayload } from "@/lib/api";
import type { Translator } from "@/lib/i18n";

import MediaImage from "./ui/MediaImage";

/**
 * The desktop contact panel, and the backdrop that makes it work.
 *
 * `.desktop-side-cover` is not decorative: the panel binding bails out entirely
 * if it is missing, so leaving it out silently disables the header's side-panel
 * button on desktop.
 *
 * `aria-hidden` and `inert` are on the server-rendered markup rather than added
 * by script, so the panel is out of the tab order from the first paint instead
 * of from whenever the script runs.
 *
 * The logo comes from the same setting as the header. This panel used to
 * hardcode /assets/logo.png, so changing the logo in General settings moved the
 * header and left the side panel showing the old one.
 */
export default function SidePanel({
  site,
  t,
  brand,
}: {
  site: SitePayload | null;
  t: Translator;
  brand: string;
}) {
  const contact = site?.contact ?? ({} as any);
  const address = contact.addressStreet || contact.addressLocality || "";

  return (
    <>
      <div className="desktop-side-cover" aria-hidden="true" />

      <aside className="desktop-side-panel" id="desktop-side-panel" aria-hidden="true" inert>
        <button
          className="desktop-side-panel__close"
          type="button"
          aria-label={t("ui.close_contact")}
        >
          <svg viewBox="0 0 28 25" aria-hidden="true">
            <path d="m.7.8 26 23" />
            <path d="m26.7.8-26 23" />
          </svg>
        </button>

        <div className="desktop-side-panel__inner">
          <a className="desktop-side-panel__logo" href={site?.homeUrl ?? "/"} aria-label={brand}>
            {/* 75x75 is the box the stylesheet reserves, which is what stops the
                panel reflowing; object-fit: contain letterboxes the taller
                artwork inside it rather than stretching it. Lazy, not eager: the
                panel is closed on load. */}
            {site?.logo ? (
              <MediaImage
                image={{ ...site.logo, sizes: "75px", width: 75, height: 75 }}
                alt={brand}
              />
            ) : (
              <img src="/assets/logo.png" alt={brand} width={75} height={75} loading="lazy" />
            )}
          </a>

          <Socials site={site} label={t("ui.social_media")} exclude={["threads"]} />

          <div className="desktop-side-panel__details">
            {address ? <p>{address}</p> : null}

            {contact.email ? (
              <p>
                {t("ui.email")}: <a href={`mailto:${contact.email}`}>{contact.email}</a>
              </p>
            ) : null}

            {contact.phone ? (
              <p>
                <a href={contact.telUrl ?? undefined}>{contact.phone}</a> :{t("ui.phone")}
              </p>
            ) : null}

            {contact.whatsappUrl ? (
              <p>
                <a href={contact.whatsappUrl}>{contact.phoneDisplay}</a> :{t("ui.whatsapp")}
              </p>
            ) : null}
          </div>
        </div>
      </aside>
    </>
  );
}

function Socials({
  site,
  label,
  exclude = [],
}: {
  site: SitePayload | null;
  label: string;
  exclude?: string[];
}) {
  const profiles = (site?.socials ?? []).filter((profile) => !exclude.includes(profile.key));

  if (profiles.length === 0) {
    return null;
  }

  return (
    <div className="desktop-side-panel__socials" aria-label={label}>
      {profiles.map((profile) => (
        <a
          key={profile.key}
          href={profile.url}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={profile.label}
        >
          <svg viewBox={profile.viewBox} aria-hidden="true">
            <path d={profile.path} />
          </svg>
        </a>
      ))}
    </div>
  );
}