<template>
  <div class="menu">
    <template v-if="chatStore.isLoggedIn">
      <button @click="handleLeave">{{ $t('menu_leave') }}</button>
      <button @click="handleSearch" :class="{ 'is-active': chatStore.currentView === 'search' }">
        {{ $t('menu_search') }}
      </button>
      <button
        @click="handleInbox"
        :class="{ 'has-unread': chatStore.unreadChatsCount > 0, 'is-active': chatStore.currentView === 'inbox' }"
      >
        {{ $t('menu_inbox') }}<span v-if="chatStore.unreadChatsCount > 0"> ({{ chatStore.unreadChatsCount }})</span>
      </button>
      <button @click="handleHistory" :class="{ 'is-active': chatStore.currentView === 'history' }">
        {{ $t('menu_history') }}
      </button>
      <span v-if="chatStore.remainingSecondsToTimeout > 0" class="menu-info-text">
        {{ formatTime(chatStore.remainingSecondsToTimeout) }}
      </span>
    </template>
  </div>
</template>

<script setup>
import { useChatStore } from '../stores/chat';

const chatStore = useChatStore();

function handleLeave() {
  chatStore.logout();
}

function handleSearch() {
  chatStore.setView('search');
}

function handleInbox() {
  chatStore.setView('inbox');
}

function handleHistory() {
  chatStore.setView('history');
}

function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${minutes}:${secs.toString().padStart(2, '0')}`;
}
</script>
