<template>
  <div v-if="hasOpenLogs" class="host-action-log-stack" aria-live="polite">
    <template v-for="entry in hostRemoteActionLogs" :key="entry.id">
      <HostActionLogModal
        v-if="entry.open"
        :host-id="entry.hostId"
        :open="true"
        :title="entry.title"
        :loading="entry.loading"
        :ok="entry.ok"
        :message="entry.message"
        :output="entry.output"
        :log-placeholder="entry.logPlaceholder"
        :log-visible="entry.logVisible"
        :session-started-at="entry.sessionStartedAt"
        @close="closeHostRemoteActionLog(entry.id)"
        @toggle-log="toggleHostRemoteActionLog(entry.id)"
        @finished="syncHostRemoteActionJobFinished(entry.id, $event)"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import HostActionLogModal from "./HostActionLogModal.vue";
import {
  closeHostRemoteActionLog,
  hostRemoteActionLogs,
  syncHostRemoteActionJobFinished,
  toggleHostRemoteActionLog,
} from "../composables/useHostRemoteAction";

const hasOpenLogs = computed(() => hostRemoteActionLogs.some((e) => e.open));
</script>

<style scoped>
.host-action-log-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.65rem;
  width: min(56rem, calc(100vw - 2rem));
  max-height: min(90vh, 48rem);
  overflow-y: auto;
  pointer-events: none;
}

.host-action-log-stack :deep(.host-action-log-panel) {
  pointer-events: auto;
  width: 100%;
  max-height: min(36rem, 45vh);
}
</style>
