<script setup lang="ts">
import { computed } from 'vue'

import { useSystemStore } from '@/stores/system'
import { useDomainsStore } from '@/stores/domains'
const ds = useDomainsStore()
const sys = useSystemStore()

const status = computed(() => {
  if (ds.loading) {
    return {
      icon: 'status-loading-data',
      text: 'Loading analyzed domains...',
    }
  } else if (ds.error) {
    return {
      icon: 'status-whoops',
      text: 'Things went south. Try again?'
    }
  } else if (sys.anyRunning) {
    return {
      icon: 'status-drs-working',
      text: sys.statusText
    }
  } else {
    return {
      icon: 'status-idle',
      text: `DRS idle. Returned ${ds.total}\xa0domain(s).`
    }
  }
})
</script>

<template>
  <div class="system-status">
    <transition mode="out-in">
      <Icon
        :key="status.icon"
        :name="status.icon"
        :class="{ 'status-working': sys.anyRunning }"
      />
    </transition>
    <span>{{ status.text }}</span>
  </div>
</template>

<style>
.system-status {
  user-select: none;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  margin-inline: 1em;
  background-color: hsl(var(--bg5));
}
.system-status svg {
  font-size: 1.25em;
  flex-shrink: 0;
  margin-inline: 0.25em 0.75em;
}
.status-working {
  animation: spin 2s infinite;
}
@keyframes spin {
  from { transform: rotate(0); }
  to { transform: rotate(1turn); }
}
</style>