import {
  useState,
  useEffect,
  useCallback,
} from 'react'
import { useLocation } from 'react-router-dom'

import isEmpty from 'lodash/isEmpty'

import type { SportTypes } from 'config'

import { getMatchPlaylists } from 'requests'

import { useToggle } from 'hooks'

import { buildPlaylists } from 'features/MatchPage/helpers/buildPlaylists'
import { Playlists } from 'features/MatchPage/types'
import { Chapters } from 'features/MultiSourcePlayer/types'
import { useDuration } from 'features/MultiSourcePlayer/hooks/useDuration'

import { useSettingsState } from './useSettingsState'
import { useSportActions } from './useSportActions'

import type { MatchData } from '../../types'
import { PlayerPlaylistFormats } from '../../types'
import { usePlayerClickHandler } from './usePlayerClickHandler'
import { usePlaylistLexics } from './usePlaylistLexics'

type ArgsFetchMatchPlaylists = {
  id: number,
  sportType: SportTypes,
  withFullMatchDuration?: boolean,
}

const initialPlaylists = buildPlaylists(null)

export const useMatchPopup = () => {
  const { pathname } = useLocation()
  const [match, setMatch] = useState<MatchData>(null)
  const [chapters, setChapters] = useState<Chapters>([])
  const [matchPlaylists, setMatchPlaylists] = useState<Playlists>(initialPlaylists)
  const {
    close: closePopup,
    isOpen,
    open: openPopup,
  } = useToggle()

  const {
    setEpisodeDuration,
    setSelectedActions,
    setSelectedPlaylistFormat,
    setSettings,
    settings,
  } = useSettingsState(match?.sportType)

  const {
    selectedActions,
    selectedFormat: selectedPlaylistFormat,
  } = settings

  const { actions, fetchSportActions } = useSportActions(match?.sportType)

  const { fetchLexics } = usePlaylistLexics()

  const isFormatSelectedActions = selectedPlaylistFormat === PlayerPlaylistFormats.SELECTED_ACTIONS
  useEffect(() => {
    if (isFormatSelectedActions) {
      fetchSportActions()
    } else {
      setSelectedActions([])
    }
  }, [
    isFormatSelectedActions,
    fetchSportActions,
    setSelectedActions,
  ])

  useEffect(() => {
    if (isFormatSelectedActions && isEmpty(selectedActions)) {
      setSelectedPlaylistFormat(PlayerPlaylistFormats.ALL_MATCH_TIME)
    }
  }, [
    selectedActions,
    isFormatSelectedActions,
    setSelectedPlaylistFormat,
  ])

  useEffect(() => {
    setMatchPlaylists(initialPlaylists)
  }, [pathname])
  const fullMatchDuration = useDuration(chapters) / 1000
  const fetchMatchPlaylists = useCallback(({
    id,
    sportType,
    withFullMatchDuration = true,
  }: ArgsFetchMatchPlaylists) => {
    getMatchPlaylists({
      fullMatchDuration,
      matchId: id,
      selectedActions: [],
      sportType,
      withFullMatchDuration,
    }).then(fetchLexics)
      .then(buildPlaylists)
      .then(setMatchPlaylists)
  }, [fetchLexics, fullMatchDuration])
  const openMatchPopup = (selectedMatch: MatchData) => {
    if (!selectedMatch) return
    setMatch(selectedMatch)
    openPopup()
    fetchMatchPlaylists({
      id: selectedMatch.id,
      sportType: selectedMatch.sportType,
    })
  }
  return {
    actions,
    chapters,
    closePopup,
    fetchMatchPlaylists,
    fetchSportActions,
    isOpen,
    match,
    matchPlaylists,
    onActionClick: setSelectedActions,
    onDurationChange: setEpisodeDuration,
    onFormatSelect: setSelectedPlaylistFormat,
    openMatchPopup,
    setMatch,
    setSettings,
    settings,
    ...usePlayerClickHandler(),
    setChapters,
  }
}
