<script setup>
import { state } from '@/store';
import moment from 'moment';
import { computed } from 'vue';

const mqttMetrics = computed(() => state.selectedNodeMqttMetrics);
</script>
<template>
    <div>
        <div class="bg-gray-200 p-2">
            <div class="font-semibold">MQTT</div>
            <div class="text-sm text-gray-600">Topics this node sent packets to</div>
        </div>

        <!-- List of MQTT Topics or No Data -->
        <ul role="list" class="flex-1 divide-y divide-gray-200">
            <li v-if="mqttMetrics.length === 0">
                <div class="block flex-1 px-4 py-2">
                    <div class="text-sm text-gray-700">No packets seen on MQTT</div>
                </div>
            </li>

            <li v-else v-for="(mqttMetric, index) in mqttMetrics" :key="`${mqttMetric.mqtt_topic}-${index}`">
                <div class="relative flex items-center">
                    <div class="block flex-1 px-4 py-2">
                        <div class="truncate">
                            <p class="truncate text-sm font-medium text-gray-900">{{ mqttMetric.mqtt_topic }}</p>
                            <div class="text-sm text-gray-700">
                                Last packet {{ moment(new Date(mqttMetric.last_packet_at)).fromNow() }}
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>