"use client";

import { useState, useCallback } from "react";
import { useQueryClient } from "@tanstack/react-query";

export const QUALITY_OPTIONS = [
  { value: "direct", label: "Auto" },
  { value: "40000000", label: "40 Mbps" },
  { value: "8000000", label: "8 Mbps" },
  { value: "2000000", label: "2 Mbps" },
];

export function useQuality(channelId?: string, slotId?: string) {
  const queryClient = useQueryClient();
  const [quality, setQuality] = useState<string>(() => {
    try {
      return localStorage.getItem("quality") ?? "direct";
    } catch {
      return "direct";
    }
  });
  const [showQualityPicker, setShowQualityPicker] = useState(false);

  const changeQuality = useCallback(
    (q: string) => {
      setQuality(q);
      try {
        localStorage.setItem("quality", q);
      } catch {}
      setShowQualityPicker(false);
      queryClient.invalidateQueries({
        queryKey: ["stream-url", channelId, slotId],
      });
    },
    [queryClient, channelId, slotId],
  );

  return { quality, showQualityPicker, setShowQualityPicker, changeQuality, QUALITY_OPTIONS };
}