<script setup lang="ts">
import { useSocketStore } from 'stores/socket';
import { useSimulationStore } from 'stores/simulation';
import { useIcloudStore } from 'stores/icloud';
import { useDeviceStore } from 'stores/device';
import { useTunneldStore } from 'stores/tunneld';
import { storeToRefs } from 'pinia';

const socketStore = useSocketStore();
const simulationStore = useSimulationStore();
const icloudStore = useIcloudStore();
const deviceStore = useDeviceStore();
const tunneldStore = useTunneldStore();

const { sockConnected } = storeToRefs(socketStore);
const { deviceConnected } = storeToRefs(deviceStore);
const { tunnelConnected } = storeToRefs(tunneldStore);
const { simulationState, testMode } = storeToRefs(simulationStore);
const { icloudMonitor } = storeToRefs(icloudStore);

function statusDevColor(state: string | boolean | null | undefined): string {
  if (state === null || state === undefined) {
    return 'grey';
  }
  if (typeof state === 'boolean') {
    return state ? 'green' : 'red';
  } else {
    switch (state.toLowerCase()) {
      case 'paused':
        return 'yellow';
      case 'running':
        return 'green';
      case 'stopped':
        return 'red';
      default:
        return 'grey';
    }
  }
}
</script>

<template>
  <q-toolbar :class="testMode ? 'bg-warning text-black' : 'bg-primary text-white'">
    <div class="flex col">
      <q-space />
      <!--
      <div style="width: 80vw" class="flex justify-end">
      -->
      <div class="q-gutter-x-sm">
        <q-btn dense rounded push size="sm" icon="mdi-cog" @click="socketStore.toggleSock()">
          <q-badge :color="statusDevColor(sockConnected)" rounded floating />
        </q-btn>
        <q-btn
          dense
          rounded
          push
          size="sm"
          icon="mdi-cellphone"
          @click="socketStore.requestUpdate()"
        >
          <q-badge :color="statusDevColor(deviceConnected)" rounded floating />
        </q-btn>
        <q-btn dense rounded push size="sm" icon="mdi-subway" @click="socketStore.requestUpdate()">
          <q-badge :color="statusDevColor(tunnelConnected)" rounded floating />
        </q-btn>
        <q-btn
          dense
          rounded
          push
          size="sm"
          icon="mdi-map-marker"
          @click="socketStore.requestUpdate()"
        >
          <q-badge :color="statusDevColor(simulationState)" rounded floating />
        </q-btn>
        <q-btn
          dense
          rounded
          push
          size="sm"
          icon="mdi-cloud"
          @click="icloudStore.icloudMonitorControl('refresh')"
        >
          <q-badge :color="statusDevColor(icloudMonitor)" rounded floating />
        </q-btn>
      </div>
    </div>
  </q-toolbar>
</template>

<style scoped></style>
