import type { ComponentType, ReactNode } from 'react'
import type { HTMLAttrs, Variant } from './common'

type ControlBarTrack = {
  source: string
  label: string
  kind: string
  language: string
}

type ControlBarSource = {
  source: string
  mediaType: string
  qualityName: string
  qualityRank: number
  isFallback: boolean
}

export interface ControlBarProps extends HTMLAttrs {
  children?: ReactNode
  variant?: Variant
  videoPlayer: any
  videoPlayerContainer: any
  sources: ControlBarSource[]
  tracks?: ControlBarTrack[]
  videoPlaying: boolean
  videoUnplayed: boolean
  videoBufferEnd: number
  isHidden?: boolean
  videoLength: number
  videoCurrentTime: number
  videoCurrentVolume: number
  videoIsMuted: boolean
  setVolume: (volume: number) => void
  isMobile: boolean
  tracksAvailable: boolean
  togglePlayPause: () => void
  setSeek: (time: number) => void
  toggleMute: () => void
  toggleFullscreen: () => void
  videoIsFullscreen: boolean
  setTextTracks: (track: number) => void
  selectedTextTrack: number
  resetInactivityTimer: () => void
  videoQuality: number
  setVideoQuality: (quality: number) => void
  captionsMenuOpen: boolean
  setCaptionsMenuOpen: (open: boolean) => void
  qualityMenuOpen: boolean
  setQualityMenuOpen: (open: boolean) => void
  clearInactivityTimer: () => void
  copy: 'en' | 'fr'
  compactModeThreshold: number
  videoPlayerWidth: number
}

export declare const ControlBar: ComponentType<ControlBarProps>