Embed

"use client";

import { useEffect, useId, useRef, useState, type ComponentProps, type CSSProperties, type ReactNode } from "react";
import { Icon } from "./icon";
import "./embed.css";

export type EmbedProps = Omit<ComponentProps<"iframe">, "title"> & {
  /** Names the frame and heads the placeholder, e.g. "Q3 launch video". */
  title: string;
  /** Frame shape as a CSS aspect-ratio. */
  ratio?: string;
  /** Who serves the content, e.g. "YouTube". Defaults to the host name of src. */
  provider?: string;
  /** The line under the title. Defaults to which site it loads from and that it may set cookies. */
  description?: ReactNode;
  /** Art behind the placeholder, such as a thumbnail you host yourself. */
  poster?: ReactNode;
  /** Text of the load button. */
  action?: string;
  /** Loaded, when you control it, for example from a saved consent. */
  active?: boolean;
  /** Loaded on first render, when you do not control it. */
  defaultActive?: boolean;
  /** Called when the person chooses to load the content. */
  onActivate?: () => void;
};

function host(src: string | undefined): string | undefined {
  if (!src) return undefined;
  try {
    return new URL(src).hostname.replace(/^www\./, "");
  } catch {
    return undefined;
  }
}

export function Embed({
  title,
  ratio = "16 / 9",
  provider,
  description,
  poster,
  action = "Load content",
  active,
  defaultActive = false,
  onActivate,
  className,
  style,
  src,
  ...rest
}: EmbedProps) {
  const id = useId();
  const frame = useRef<HTMLIFrameElement>(null);
  const chosen = useRef(false);
  const [inner, setInner] = useState(defaultActive);
  const on = active ?? inner;
  const from = provider ?? host(src);
  const line = description ?? (from ? `Loads content from ${from}, which may set cookies.` : "Loads content from another site.");

  // Focus follows the person into the frame they chose to load, not one loaded for them.
  useEffect(() => {
    if (on && chosen.current) {
      chosen.current = false;
      frame.current?.focus();
    }
  }, [on]);

  function activate() {
    chosen.current = true;
    if (active === undefined) setInner(true);
    onActivate?.();
  }

  return (
    <div
      className={["eq-embed", className].filter(Boolean).join(" ")}
      style={{ ...style, "--_ratio": ratio } as CSSProperties}
      data-active={on || undefined}
    >
      {on ? (
        <iframe
          referrerPolicy="strict-origin-when-cross-origin"
          allowFullScreen
          {...rest}
          ref={frame}
          src={src}
          title={title}
          className="eq-embed-frame"
        />
      ) : (
        <div className="eq-embed-placeholder">
          {poster != null && (
            <div className="eq-embed-poster" aria-hidden="true">
              {poster}
            </div>
          )}
          <div className="eq-embed-card">
            <p className="eq-embed-title" id={`${id}-title`}>
              {title}
            </p>
            <p className="eq-embed-note" id={`${id}-note`}>
              {line}
            </p>
            <button
              type="button"
              className="eq-embed-load"
              aria-describedby={`${id}-title ${id}-note`}
              onClick={activate}
            >
              <Icon name="play" size={16} />
              {action}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}