import { ref } from 'vue'
import { VIDEO_MONITORS } from '../constants'

/**
 * 视频监控状态管理
 */
export function useVideoMonitor() {
  // 视频监控列表
  const monitors = ref(VIDEO_MONITORS)

  // 当前选中的视频
  const activeMonitor = ref(null)

  // 视频控制状态
  const controlState = ref({
    volume: 50,
    isRecording: false,
    isMegaphoneActive: false
  })

  // 选择视频
  const selectMonitor = (monitorId) => {
    const monitor = monitors.value.find((m) => m.id === monitorId)
    if (monitor) {
      activeMonitor.value = monitor
    }
  }

  // 切换喊话
  const toggleMegaphone = () => {
    controlState.value.isMegaphoneActive = !controlState.value.isMegaphoneActive
  }

  // 切换录制
  const toggleRecording = () => {
    controlState.value.isRecording = !controlState.value.isRecording
  }

  // 调整音量
  const setVolume = (volume) => {
    controlState.value.volume = Math.max(0, Math.min(100, volume))
  }

  // 窗口放大
  const zoomMonitor = (monitorId) => {
    console.log(`Zoom monitor: ${monitorId}`)
    // 实际实现可以打开全屏弹窗
  }

  return {
    monitors,
    activeMonitor,
    controlState,
    selectMonitor,
    toggleMegaphone,
    toggleRecording,
    setVolume,
    zoomMonitor
  }
}
