<script setup>
import { computed } from 'vue';

import {
  DisconnectOutlined,
  LoadingOutlined,
  WifiOutlined,
} from '@ant-design/icons-vue';

import { useChatStore } from '../stores/chat.ts';

const chatStore = useChatStore();

const statusClass = computed(() => {
  switch (chatStore.connectionStatus) {
    case 'connected': {
      return 'bg-green-500 text-white';
    }
    case 'connecting': {
      return 'bg-yellow-500 text-white';
    }
    case 'disconnected': {
      return 'bg-red-500 text-white';
    }
    default: {
      return 'bg-gray-500 text-white';
    }
  }
});

const iconComponent = computed(() => {
  switch (chatStore.connectionStatus) {
    case 'connected': {
      return WifiOutlined;
    }
    case 'connecting': {
      return LoadingOutlined;
    }
    case 'disconnected': {
      return DisconnectOutlined;
    }
    default: {
      return WifiOutlined;
    }
  }
});
</script>

<template>
  <div
    :class="statusClass"
    class="fixed left-5 bottom-5 z-50 flex items-center gap-2 rounded-full px-3 py-2 text-sm font-medium transition-all"
  >
    <component
      :is="iconComponent"
      :class="{ 'animate-spin': chatStore.connectionStatus === 'connecting' }"
    />
    {{ chatStore.connectionStatusText }}
  </div>
</template>
