<template>
  <div class="terminal-view">
    <div class="terminal-view__main">
      <TerminalEmulator />
    </div>
    <div class="terminal-view__sidebar">
      <CommandHistory @select="handleHistorySelect" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onUnmounted } from 'vue'
import { useTerminalStore } from '@/stores/terminal'
import TerminalEmulator from '@/components/terminal/TerminalEmulator.vue'
import CommandHistory from '@/components/terminal/CommandHistory.vue'

const terminalStore = useTerminalStore()

onUnmounted(() => {
  terminalStore.disconnectWebSocket()
})

function handleHistorySelect(command: string): void {
  // When a history item is clicked, send it as a new command
  terminalStore.sendCommand(command)
}
</script>

<style scoped>
.terminal-view {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.terminal-view__main {
  flex: 1;
  overflow: hidden;
  padding: 16px;
}

.terminal-view__sidebar {
  width: 280px;
  overflow: hidden;
}
</style>
