import { useCallback, useState } from 'react'

/**
 * The six in-player overlay panels are independent toggles (the user can
 * have Episodes AND Stream Info open at the same time) so this isn't a
 * state machine - just a typed dictionary so we don't carry six
 * useState calls + six setters through the page. Reset on navigation
 * via `closeAll`.
 */
export type PanelId =
  | 'streamInfo'
  | 'episodes'
  | 'hints'
  | 'bookmarks'
  | 'chapters'
  | 'subSearch'
  | 'syncPlay'

type PanelState = Record<PanelId, boolean>

const ALL_CLOSED: PanelState = {
  streamInfo: false,
  episodes: false,
  hints: false,
  bookmarks: false,
  chapters: false,
  subSearch: false,
  syncPlay: false,
}

export function usePlayerPanels() {
  const [state, setState] = useState<PanelState>(ALL_CLOSED)

  const set = useCallback((panel: PanelId, open: boolean) => {
    setState(prev => prev[panel] === open ? prev : { ...prev, [panel]: open })
  }, [])

  const toggle = useCallback((panel: PanelId) => {
    setState(prev => ({ ...prev, [panel]: !prev[panel] }))
  }, [])

  const closeAll = useCallback(() => {
    setState(ALL_CLOSED)
  }, [])

  return { state, set, toggle, closeAll }
}
