import type { MouseEvent } from 'react'
import { useState, useEffect } from 'react'
import { useLocation } from 'react-router'

import type { PlaylistOption } from 'features/MatchPage/types'

export const usePlayerClickHandler = () => {
  const { pathname } = useLocation()
  const [selectedPlaylist, setSelectedPlaylist] = useState<PlaylistOption>()
  const handlePlaylistClick = (playlist: PlaylistOption, e?: MouseEvent) => {
    e?.stopPropagation()
    if (playlist !== selectedPlaylist) {
      setSelectedPlaylist(playlist)
    }
  }

  useEffect(() => {
    setSelectedPlaylist(undefined)
  }, [pathname])

  return {
    handlePlaylistClick,
    selectedPlaylist,
  }
}
