<template>
  <div class="menu">
    <template v-if="chatStore.isLoggedIn">
      <span class="menu-info-text">{{ $t('menu_in_chat_for', [chatStore.currentConversation || '-']) }}</span>
      <span v-if="chatStore.remainingSecondsToTimeout > 0" class="menu-info-text">
        {{ $t('menu_timeout_in', [formatTime(chatStore.remainingSecondsToTimeout)]) }}
      </span>
      <button @click="handleLeave">{{ $t('menu_leave') }}</button>
      <button @click="handleSearch">{{ $t('menu_search') }}</button>
      <button @click="handleInbox">
        {{ $t('menu_inbox') }}<span v-if="chatStore.unreadChatsCount > 0"> ({{ chatStore.unreadChatsCount }})</span>
      </button>
      <button @click="handleHistory">{{ $t('menu_history') }}</button>
    </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>

