<script setup lang="ts">
import { browserIconSrc, configurationIconSrc } from "../../utils/icons";
import type { AppPage, BrowserView } from "../../types/browser";

defineProps<{
  browsers: BrowserView[];
  currentBrowserId: string | null;
  page: AppPage;
  loading: boolean;
  configsLoading: boolean;
  browserMonogram: (browserId: string) => string;
}>();

const emit = defineEmits<{
  selectBrowser: [browserId: string];
  selectConfiguration: [];
  refresh: [];
}>();
</script>

<template>
  <aside class="sidebar">
    <div class="sidebar-toolbar">
      <div class="sidebar-title-group">
        <h1>Browser Assistant</h1>
        <p>Local Chromium profile manager</p>
      </div>
    </div>

    <div v-if="browsers.length" class="browser-nav">
      <button
        v-for="browser in browsers"
        :key="browser.browserId"
        class="browser-nav-item"
        :class="[browser.browserFamilyId ?? browser.browserId, { active: browser.browserId === currentBrowserId && page === 'browserData' }]"
        type="button"
        @click="emit('selectBrowser', browser.browserId)"
      >
        <div class="browser-nav-icon">
          <img
            v-if="browserIconSrc(browser.iconKey ?? browser.browserFamilyId)"
            :src="browserIconSrc(browser.iconKey ?? browser.browserFamilyId) ?? undefined"
            :alt="`${browser.browserName} icon`"
          />
          <span v-else>{{ browserMonogram(browser.browserId) }}</span>
        </div>
        <div class="browser-nav-body">
          <strong>{{ browser.browserName }}</strong>
          <span>{{ browser.dataRoot }}</span>
        </div>
      </button>
    </div>

    <div v-else class="sidebar-empty">
      <p>No supported Chromium browser data was found yet.</p>
    </div>

    <button
      class="browser-nav-item utility sidebar-utility-nav"
      :class="{ active: page === 'configuration' }"
      type="button"
      @click="emit('selectConfiguration')"
    >
      <div class="browser-nav-icon config-nav-icon">
        <img :src="configurationIconSrc" alt="Configuration icon" />
      </div>
      <div class="browser-nav-body">
        <strong>Configuration</strong>
        <span>Manage custom scan sources and paths</span>
      </div>
    </button>

    <button class="refresh-button sidebar-refresh" type="button" @click="emit('refresh')">
      {{ loading || configsLoading ? "Refreshing..." : "Refresh" }}
    </button>
  </aside>
</template>
