import { useObjectState } from 'hooks'

import type {
  SelectedActions,
  EpisodeDuration,
} from 'features/MatchPopup'
import { PlayerPlaylistFormats, useMatchPopupStore } from 'features/MatchPopup'

export const useSettingsDesktop = () => {
  const {
    actions,
    fetchSportActions,
    settings,
  } = useMatchPopupStore()
  const [localSettings, setSettings] = useObjectState(settings)

  const onPlaylistFormatChange = (playlistFormat: PlayerPlaylistFormats) => {
    setSettings({ selectedFormat: playlistFormat })
    if (playlistFormat === PlayerPlaylistFormats.SELECTED_ACTIONS) {
      fetchSportActions()
    }
  }

  const onActionsChange = (selectedActions: SelectedActions) => {
    setSettings({ selectedActions })
  }

  const onEpisodeDurationsChange = (episodeDuration: EpisodeDuration) => {
    setSettings({ episodeDuration })
  }

  return {
    actions,
    localSettings,
    onActionsChange,
    onEpisodeDurationsChange,
    onPlaylistFormatChange,
    settings,
  }
}
