<template>
  <template v-if="visible">
    <v-sheet elevation="4" width="96vw" rounded="lg" class="mt-3">
      <v-expansion-panels>
        <v-expansion-panel>
          <v-expansion-panel-title>
            <div class="d-flex justify-content-between align-items-center">
              <div class="mr-3" v-if="node.status === 200">
                Name: {{ node.name }} (Status: online)
              </div>
              <div class="mr-3" v-else>
                Name: {{ node.name }} (Status: offline)
              </div>
            </div>
          </v-expansion-panel-title>

          <v-expansion-panel-text>
            <div class="d-flex flex-column">
              <div class="d-flex align-items-center mb-2">
                <span class="mr-2">Coordinates:</span>
                <span>La: {{ node.coordla }}, Long: {{ node.coordlong }}</span>
                </div>
              </div>
              <div class="d-flex align-items-center mb-2">
                <span class="mr-2">Temperature:</span>
                <span>{{ node.temperature }}°C</span>
              </div>
              <div class="d-flex align-items-center mb-2">
                <span class="mr-2">Battery:</span>
                <span>{{ node.batteryCurrent }}%</span>
              </div>
              <div class="d-flex align-items-center mb-2">
                <span class="mr-2">Runtime:</span>
                <span>{{ node.uptime }} hours</span>
              </div>
          </v-expansion-panel-text>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-sheet>
  </template>
</template>

<script setup lang="ts">
import { Node } from "@/types"; 
import { ComputedRef, inject, ref, watch } from "vue";
import { key } from "@/store";

const props = defineProps<{ node: Node }>();
const visible = ref(true);
const { searching, visibleIds } = inject(key) as {
  searching: ComputedRef<boolean>;
  visibleIds: ComputedRef<string[]>;
};

watch([searching, visibleIds], ([searching, visibleIds]) => {
  visible.value = searching ? visibleIds.includes(props.node.uuid) : true;
});

</script>

<style scoped>
.values {
  display: flex;
  align-items: center;
}

.v-text-field {
  max-width: 200px; 
  width: 100%; 
}
</style>
