import { useTranslation } from "react-i18next";
import SegmentedToggle from "./SegmentedToggle";
import { usePlexViewControls } from "./PlexViewBridge";

// The Discover ⟷ Browse switch, hosted in the header next to the library-scope pill (All/Movies/Shows).
// It reflects + drives PlexBrowse's top-level sub-view through the PlexViewBridge, and hides itself on
// the deeper views (a show/info/person page has no Discover/Browse choice).
export default function PlexViewToggle() {
  const { t } = useTranslation();
  const ctl = usePlexViewControls();
  // Only the two title-browse views host the Discover/Browse choice; deeper views (show/info/person/…)
  // and the playlists/collections browse surfaces hide it.
  if (!ctl || (ctl.kind !== "discover" && ctl.kind !== "grid")) return null;
  // The floating header wrapper is pointer-events-none (so clicks fall through its empty area to the
  // content below); every interactive child must re-enable pointer events or it is click-dead — the
  // sibling PlexScopeToggle does the same.
  return (
    <SegmentedToggle
      size="md"
      className="pointer-events-auto shrink-0"
      ariaLabel={t("plex.view.label")}
      options={[
        { value: "discover", label: t("plex.discover.tab") },
        { value: "grid", label: t("plex.view.browse") },
      ]}
      value={ctl.kind === "discover" ? "discover" : "grid"}
      onChange={(v) => ctl.open(v === "discover" ? { kind: "discover" } : { kind: "grid" })}
    />
  );
}