import { reactive, readonly } from 'vue'
import axios from 'axios'
import { handleMsg, sendSub } from './utils/websocket'

const token = window.localStorage.getItem('token')

const state = reactive({
  name: '',
  token: token || '',
  session: '',
  loggedIn: false,
  ws: null,
  events: [],
  rosters: [],
  matches: [],
  casters: [],
  hosts: [],
  streams: [],
  streamsFull: [],
  brackets: [],
  overlayStream: null,
  server: false,
})

const methods = {
  authenticate: async (token) => {
    window.localStorage.setItem('token', token)
    return axios.post('http://178.79.128.135:5000/api/v1', {
      token,
    })
      .then((res) => {
        state.session = res.data.session
        state.name = res.data.name
        state.loggedIn = true
        return true
      })
  },
  connect: (uri) => {
    state.ws = new WebSocket(`ws://178.79.128.135:5000/ws/${state.session}`)
    state.ws.onopen = () => {
      sendSub(state.ws)
    }
    state.ws.onmessage = (e) => {
      const data = JSON.parse(e.data)
      handleMsg(data)
    }
  }
}

export default {
  state,
  methods,
}