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

// The Plex library scope (both | movie | show) as a compact header control, sitting next to the
// search box (S3 toolbar relocation — it used to be a sidebar island). Reads/writes the same
// provider state the sidebar did, so scope stays in sync everywhere; reuses the shared
// SegmentedToggle and the existing plex.filter.scopeOpt.* labels.
const SCOPES = ["both", "movie", "show"] as const;

export default function PlexScopeToggle() {
  const { t } = useTranslation();
  const { scope } = usePlex();
  const { setScope } = usePlexActions();
  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={scope}
        onChange={setScope}
      />
    </div>
  );
}