<script setup>
const emit = defineEmits(['showTraceRoute']);
import moment from 'moment';
import { state } from '../../store.js';
import { findNodeById } from '../../utils.js';
</script>
<template>
    <div>
        <div class="bg-gray-200 p-2">
            <div class="font-semibold">Trace Routes</div>
            <div class="text-sm text-gray-600">Only 5 most recent are shown</div>
        </div>
        <ul role="list" class="flex-1 divide-y divide-gray-200">
            <template v-if="state.selectedNodeTraceroutes.length > 0">
                <li @click="$emit('showTraceRoute', traceroute)" v-for="traceroute of state.selectedNodeTraceroutes">
                    <div class="relative flex items-center">
                        <div class="block flex-1 px-4 py-2">
                            <div class="relative flex min-w-0 flex-1 items-center">
                                <div>
                                    <p class="text-sm text-gray-900"><span class="font-medium">{{ findNodeById(traceroute.to)?.long_name || '???' }}</span> to <span class="font-medium">{{ findNodeById(traceroute.from)?.long_name || '???' }}</span></p>
                                    <div class="text-sm text-gray-700">{{ moment(new Date(traceroute.updated_at)).fromNow() }} - {{ traceroute.route.length }} hops {{ traceroute.channel_id ? `on ${traceroute.channel_id}` : '' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </template>
            <template v-else>
                <li>
                    <div class="relative flex items-center">
                        <div class="block flex-1 px-4 py-2">
                            <div class="relative flex min-w-0 flex-1 items-center">
                                <div class="truncate">
                                    <div class="text-sm text-gray-700">No traceroutes seen on MQTT</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </template>
        </ul>
    </div>
</template>