import { useTranslation } from "react-i18next";
import SegmentedToggle from "./ui/SegmentedToggle";
import { usePlex, usePlexActions } from "./PlexProvider";
import { usePlexViewControls } from "./PlexViewBridge";

// The Plex "browse target" as a compact header control next to the search box: the three library
// scopes (both | movie | show, which browse TITLES) plus two extra entry points — Playlist and
// Collection — that switch the content area to a grid of the user's playlists / of the collections.
// The scopes read/write the shared provider state (so scope stays in sync everywhere); the two extra
// modes drive PlexBrowse's sub-view through the PlexViewBridge. Picking a scope while in a
// playlists/collections surface returns to the title grid at that scope.
const SCOPES = ["both", "movie", "show"] as const;

export default function PlexScopeToggle() {
  const { t } = useTranslation();
  const { scope } = usePlex();
  const { setScope } = usePlexActions();
  const ctl = usePlexViewControls();
  const inPlaylists = ctl?.kind === "playlists";
  const inCollections = ctl?.kind === "collections";
  // The active segment: the browse-mode when in one, else the library scope.
  const value = inPlaylists ? "playlists" : inCollections ? "collections" : scope;

  const onChange = (v: string) => {
    if (v === "playlists" || v === "collections") {
      ctl?.open({ kind: v });
      return;
    }
    setScope(v);
    // Leaving the playlists/collections surface for a title scope → show the title grid.
    if (inPlaylists || inCollections) ctl?.open({ kind: "grid" });
  };

  return (
    <div className="pointer-events-auto shrink-0">
      <SegmentedToggle
        size="md"
        ariaLabel={t("plex.filter.scope")}
        options={[
          ...SCOPES.map((s) => ({ value: s, label: t(`plex.filter.scopeOpt.${s}`) })),
          { value: "playlists", label: t("plex.filter.scopeOpt.playlists") },
          { value: "collections", label: t("plex.filter.scopeOpt.collections") },
        ]}
        value={value}
        onChange={onChange}
      />
    </div>
  );
}