<template>
  <q-page class="row items-start justify-evenly">
    <SocketTest />
    <div class="col"></div>
    <div class="col">
      <div class="q-pa-md">
        <q-btn color="purple" @click="showNotif" label="Show Notification" />
      </div>
    </div>
    <div class="col" style="border: 5px pink dashed">
      <q-icon :name="darkStatus" size="100px" @click="toggleDarkLight" />
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';
import { computed } from 'vue';
import SocketTest from 'components/SocketTest.vue';
const $q = useQuasar();

const darkStatus = computed(() => ($q.dark.isActive ? 'dark_mode' : 'light_mode'));

function toggleDarkLight() {
  $q.dark.toggle();
}



function showNotif() {
  $q.notify({
    message: 'This is a notification',
    color: 'green',
    position: 'top-right',
    timeout: 3000,
    actions: [
      {
        label: 'Dismiss',
        color: 'white',
        handler: () => {
          /* Dismiss action */
        },
      },
    ],
  });
}
</script>
<style lang="sass" scoped>
</style>
