const socket = io()

new Vue({
  el: '#app',
  data: {
    sessionId: null,
    nickname: localStorage.getItem('nickname'),
    text: null,
    rooms: [],
    currentRoom: null,
    selectedCount: 0,
    status: 'Wait',
    users: []
  },
  methods: {
    setNickname() {
      let nickname = prompt("Enter nickname:")
      if (nickname) {
        localStorage.setItem('nickname', nickname)
        this.nickname = nickname
        socket.emit('updateUser', this.sessionId, this.nickname)
      }
    },
    createRoom() {
      let name = prompt('Enter room name:')
      if (name) {
        socket.emit('createRoom', name)
        socket.emit('getRooms')
      }
    },
    openRoom(room) {
      this.currentRoom = room
      socket.emit('openRoom', this.sessionId, room)
    },
    onChanged() {
      socket.emit('locked', this.sessionId)
      socket.emit('onChanged', this.sessionId, this.nickname, this.currentRoom, this.text)
    },
    getOnline() {
      let usersNames = this.users.map(u => u.nickname ? `${u.nickname} (${u.room})` : `${u.sessionId} (${u.room})`).join(',')
      alert(usersNames)
    }
  },
  mounted() {
    socket.on('connect', () => {
      this.sessionId = socket.id
      socket.emit('sign', this.sessionId, this.nickname)
    })
    socket.on('getUsers', users => this.users = users)
    socket.on('getRooms', rooms => this.rooms = rooms)
    socket.on('getRoomTextById', (sessionId, text) => sessionId == this.sessionId ? this.text = text : null)
    socket.on('onUpdated', (sessionId, nickname, text) => {
      this.status = `${nickname ? nickname : sessionId} typing...`
      if (sessionId != this.sessionId) {
        this.text = text
      }
    })
    socket.on('locked', sessionId => {
      if (sessionId != this.sessionId) {
        this.$refs.textarea.disabled = true
      }
    })
    socket.on('onlocked', () => {
      this.status = 'Wait'
      this.$refs.textarea.disabled = false
    })
    document.addEventListener('selectionchange', () => {
      if (this.$refs.textarea) {
        this.selectedCount = this.$refs.textarea.selectionEnd - this.$refs.textarea.selectionStart
      }
    })
  }
})