import { createGlobalState } from '@vueuse/core'

interface ChatMessage {
  id: string
  username: string
  message: string
}

interface ChatChannel {
  id: number
  name: string
}

export const useChat = createGlobalState(() => {
  const messages = ref([
    {
      id: '1337',
      username: 'Yes',
      message: 'Fisting is 300 bucks',
      createdAt: Date.now(),
    },
  ])

  const channel = ref<number>(0)

  async function sendMsg(channelId: ChatChannel['id'], msg: ChatMessage['message']) {
    console.log('Trying to send message', channelId, msg)
  }

  watch(channel, async (id) => {
    await console.log('Yes', id)
  }, {
    immediate: true,
  })

  return {
    channel,

    channels,
    messages,

    sendMsg,
  }
})