import { useState } from 'react'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import type { FeedVideoDto } from '../api/client'
import { recheckLocal } from '../api/client'

interface Props {
  video: FeedVideoDto
}

function Player({ video }: Props) {
  const [localFailed, setLocalFailed] = useState(false)
  const queryClient = useQueryClient()

  const recheckMutation = useMutation({
    mutationFn: () => recheckLocal(video.youtube_video_id),
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['video', video.youtube_video_id] })
      queryClient.invalidateQueries({ queryKey: ['download-status', video.youtube_video_id] })
    },
  })

  const useLocal = video.local.available && !!video.local.media_url && !localFailed

  if (useLocal) {
    return (
      <>
        <div className="player-wrapper">
          {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
          <video
            controls
            src={video.local.media_url!}
            onError={() => {
              setLocalFailed(true)
              recheckMutation.mutate()
            }}
          />
        </div>
        <div className="video-page-source">● Локальная копия · mediaVM</div>
      </>
    )
  }

  return (
    <>
      <div className="player-wrapper">
        <iframe
          src={`https://www.youtube-nocookie.com/embed/${video.youtube_video_id}`}
          title={video.title}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        />
      </div>
      <div className="video-page-source">
        {localFailed ? 'Локальная копия недоступна. Переключено на YouTube.' : 'Источник: YouTube'}
      </div>
    </>
  )
}

export default Player