<script setup lang="ts">
import { socket } from 'boot/socketio';
import { computed, ref } from 'vue';
import { useSocketStore } from 'stores/socket';
import { storeToRefs } from 'pinia';
import type { ClientToServerEvents } from 'components/models';

const socketStore = useSocketStore();

const sockEvent = ref('');
const eventArgs = ref('');

const { sockConnected } = storeToRefs(socketStore);

const sockStatColor = computed(() => {
  return sockConnected.value ? 'green' : 'red';
});

function handleEmit() {
  const event = sockEvent.value;
  const jsonArgs = eventArgs.value;
  socket.emit(event as keyof ClientToServerEvents, jsonArgs, (resp: unknown) => {
    console.log('Server Response: %s', resp);
  });
  sockEvent.value = '';
  eventArgs.value = '';
}
const timeWithSeconds = ref('00:00:45');

</script>
<template>
  <div class="flex flex-center col q-ma-lg q-gutter-md">
    <q-btn icom="webhook"><q-badge floating :color="sockStatColor" rounded></q-badge></q-btn>
    <q-btn label="Connect" @click="socketStore.connect()" />
    <q-btn label="Disconnect" @click="socketStore.disconnect()" />
  </div>
  <div class="flex flex-center col q-ma-lg q-gutter-md">
    <div class="text-h3">SocketIO Functions</div>
    <q-input v-model="sockEvent" filled label="Event" />
    <q-input v-model="eventArgs" filled label="Args" />
    <div>
      <q-btn label="Emit" @click="handleEmit" />
    </div>
  </div>
  <div>
    <q-time v-model="timeWithSeconds" with-seconds format24h default-view="seconds" />
  </div>
</template>
