<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const input = ref('')
const msgs = ref([{ username: 'Server', message: 'Welcome to Chat App' }, { username: 'Server', message: 'This is an example message' }])
let ws;

async function sendMsg(ev) {
  ev.preventDefault()

  let msg = input.value
  input.value = ''

  ws.send(msg)
}

onMounted(async () => {
  let proto = window.location.protocol == 'https:' ? 'wss://' : 'ws://'
  let host = window.location.host
  ws = new WebSocket(proto + host + "/api/ws")

  ws.onerror = function (event) {
    console.log('WebSocket connection failed:', event);
    emit('update:modelValue', '')
    //alert("Not logged in!")
    window.location.hash = "/login"
  };

  ws.onmessage = async function (event) {
    console.log("event data: " + event.data)
    msgs.value.push(JSON.parse(event.data))
    console.log("msgs:" + msgs.value)
  };

  console.log(ws)
})
</script>

<template>
  <main>
    <div class="overflow-auto position-relative pb-5">
      <!--
      <div v-for="msg in msgs" class="card m-3 text-bg-secondary">
        <div class="card-body">{{ msg.username }}: {{ msg.message }}</div>
      </div>
      <div v-for="msg in msgs" class="input-group">
        <div class="alert alert-primary">{{ msg.username }}</div>
        <div class="alert alert-secondary">{{ msg.message }}</div>
      </div>
        -->
      <div v-for="msg in msgs" class="d-flex text-body-secondary pt-2 px-3 border-bottom">
        <p class="pb-2 mb-0 small lh-sm word-wrap">
        <div class="d-flex justify-content-between">
          <strong class="d-block text-gray-dark">{{ msg.username }}</strong>
          <div>{{ msg.timestamp }}</div>
        </div>
        {{ msg.message }}
        </p>
      </div>
      <form onsubmit="event.preventDefault();" class="container-fluid fixed-bottom mb-3">
        <div class="input-group">
          <input v-model="input" type="text" class="form-control text-bg-secondary" placeholder="Type message here"
            aria-label="Chat message" aria-describedby="button-submit">
          <button @click="sendMsg" class="btn btn-primary" id="button-submit">Send</button>
        </div>
      </form>
    </div>
  </main>
</template>

<style scoped>
.word-wrap {
  word-break: break-all;
  width: 100vw;
}
</style>

