// 创建 RTCPeerConnection 对象
var pc = new RTCPeerConnection()
// 创建数据通道
const dataChannel = this.peerConnection.createDataChannel('fileTransfer', {
  ordered: true, // 保证到达顺序
})

// 监听文件通道状态
// 当文件通道状态发生变化时触发
dataChannel.onopen = (event) => {
  ElMessage.success('文件通道已打开')
  console.log('🚀🚀🚀 / event', event)
}

// 当文件通道关闭时触发
dataChannel.onclose = (event) => {
  ElMessage.warning('文件通道已关闭')
}

// 当文件通道发生错误时触发
dataChannel.onerror = (event) => {
  ElMessage.error('文件通道发生错误')
}

// 当文件通道收到消息时触发
dataChannel.onmessage = (event) => {
  // eslint-disable-next-line no-console
  console.log('🚀🚀🚀 / event', event)
}

import io from 'socket.io-client'
const socket = io('https://localhost:3000')

// 连接成功时触发
socket.on('connect', () => {
  handleConnect()
})

// 断开连接时触发
socket.on('disconnect', (reason) => {
  if (reason === 'io server disconnect') {
    // 断线是由服务器发起的，重新连接。
    socket.connect()
  }
  ElMessage.warning('您已断开连接')
})
// 服务端发送报错信息
socket.on('error', (data) => {
  ElMessage.error(data)
})
// 当有用户加入房间时触发
socket.on('welcome', (data) => {
  ElMessage.success(data.userId === userId ? '🦄成功加入房间' : `🦄${data.userId}加入房间`)
})
// 当有用户离开房间时触发
socket.on('leave', (data) => {
  ElMessage.warning(data.userId === userId ? '🦄成功离开房间' : `🦄${data.userId}离开房间`)
})
// 当有用户发送消息时触发
socket.on('message', (data) => {})
// 创建offer,发送给远端
socket.on('createOffer', (data) => {
  // 如果已经创建过，直接发送
  if (offerSdp) {
    socket.emit('offer', {
      userId,
      roomId: roomId.value,
      sdp: offerSdp,
    })
    return
  }
  createOffer() // 创建 offer
})
// 收到offer,创建answer
socket.on('offer', (data) => {
  createAnswer(data.sdp)
})
// 收到answer,设置远端sdp
socket.on('answer', (data) => {
  addAnswer(data.sdp)
})

// 随机一个用户名，后面你可以自己改成输入框让用户输入
const userId = Math.random().toString(36).substring(2)
// 房间号，这里随便写一个，后面你可以自己改成输入框让用户输入
const roomId = 123

// 加入房间
function joinRoom() {
  socket.emit('join', { userId, roomId })
}

// 成功加入房间
socket.on('joined', (room, id) => {
  ElMessage.success('🦄🦄🦄成功加入房间')
  createOffer()
})

// 创建 offer
async function createOffer() {
  // 当一个新的offer ICE候选人被创建时触发事件
  peerConnection.onicecandidate = async (event) => {
    if (event.candidate) {
      offerSdp = JSON.stringify(peerConnection.localDescription)
      // 发送 offer
      if (offerSdp) {
        socket.emit('offer', {
          userId,
          roomId: roomId.value,
          sdp: offerSdp,
        })
      }
    }
  }
  const offer = await peerConnection.createOffer()
  await peerConnection.setLocalDescription(offer)
}

// 接收 offer
socket.on('offer', (data) => {
  // console.log('offer', data)
  socket.to(data.roomId).emit('offer', data)
})

// 创建 answer
async function createAnswer(val: string) {
  const offer = JSON.parse(val)
  peerConnection.onicecandidate = async (event) => {
    // 当一个新的 answer ICE candidate 被创建时
    if (event.candidate) {
      socket.emit('answer', {
        userId,
        roomId: roomId.value,
        sdp: JSON.stringify(peerConnection.localDescription),
      })
    }
  }
  await peerConnection.setRemoteDescription(offer)
  const answer = await peerConnection.createAnswer()
  await peerConnection.setLocalDescription(answer)
}

const createAnswer = async () => {
  // 解析字符串
  const offer = JSON.parse(offerSdp)
  pc.onicecandidate = async (event) => {
    // Event that fires off when a new answer ICE candidate is created
    if (event.candidate) {
      answerSdp = JSON.stringify(pc.localDescription)
    }
  }
  await pc.setRemoteDescription(offer)
  const answer = await pc.createAnswer()
  await pc.setLocalDescription(answer)
}

// 添加 answer(应答)
const addAnswer = async () => {
  const answer = JSON.parse(answerSdp)
  if (!pc.currentRemoteDescription) {
    pc.setRemoteDescription(answer)
  }
}