<script setup>
const emit = defineEmits(['goTo']);
import moment from 'moment';
import { state } from '../store.js';
import { getNodeColor, getNodeTextColor, findNodeById, findNodeMarkerById } from '../utils.js';
</script>
<template>
    <div class="relative z-sidebar" role="dialog" aria-modal="true">

        <!-- overlay -->
        <transition
                enter-active-class="transition-opacity duration-300 ease-linear"
                enter-from-class="opacity-0"
                enter-to-class="opacity-100"
                leave-active-class="transition-opacity duration-300 ease-linear"
                leave-from-class="opacity-100"
                leave-to-class="opacity-0">
            <div v-show="state.selectedTraceRoute != null" @click="state.selectedTraceRoute = null" class="fixed inset-0 bg-gray-900/75"></div>
        </transition>

        <!-- sidebar -->
        <transition
                enter-active-class="transition duration-300 ease-in-out transform"
                enter-from-class="-translate-x-full"
                enter-to-class="translate-x-0"
                leave-active-class="transition duration-300 ease-in-out transform"
                leave-from-class="translate-x-0"
                leave-to-class="-translate-x-full">
            <div v-show="state.selectedTraceRoute != null" class="fixed top-0 left-0 bottom-0">
                <div v-if="state.selectedTraceRoute != null" class="w-screen h-full max-w-md overflow-hidden">
                    <div class="flex h-full flex-col bg-white shadow-xl">

                        <!-- slideover header -->
                        <div class="p-2 border-b border-gray-200 shadow-sm">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h2 class="font-bold">Traceroute #{{ state.selectedTraceRoute.id }}</h2>
                                    <h3 class="text-sm">{{ moment(new Date(state.selectedTraceRoute.updated_at)).fromNow() }} - {{ state.selectedTraceRoute.route.length }} hops {{ state.selectedTraceRoute.channel_id ? `on ${state.selectedTraceRoute.channel_id}` : '' }}</h3>
                                </div>
                                <div class="my-auto ml-3 flex h-7 items-center">
                                    <a href="javascript:void(0)" class="rounded-full" @click="state.selectedTraceRoute = null">
                                        <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
                                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M18 6l-12 12"></path>
                                                <path d="M6 6l12 12"></path>
                                            </svg>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="overflow-y-auto">

                            <!-- details -->
                            <div class="p-2">
                                <ul role="list" class="space-y-3">

                                    <!-- node that initiated traceroute -->
                                    <li @click="$emit('goTo', state.selectedTraceRoute.to)" class="relative flex gap-x-4">
                                        <div class="absolute left-0 top-0 flex w-12 justify-center top-3 -bottom-3">
                                            <div class="w-px bg-gray-200"></div>
                                        </div>
                                        <div class="my-auto relative flex flex-none items-center justify-center">
                                            <div>
                                                <div class="flex rounded-full h-12 w-12 text-white shadow-sm" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.to)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.to)}]` ]">
                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.to)?.short_name ?? "?" }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
                                            <div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.to)?.long_name || '???' }}</div>
                                            <div>Hex ID: !{{ Number(state.selectedTraceRoute.to).toString(16) }}</div>
                                            <div>Started the traceroute</div>
                                        </div>
                                    </li>

                                    <!-- middleman nodes -->
                                    <li @click="$emit('goTo', route)" v-for="route of state.selectedTraceRoute.route" class="relative flex gap-x-4">
                                        <div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
                                            <div class="w-px bg-gray-200"></div>
                                        </div>
                                        <div class="my-auto relative flex flex-none items-center justify-center">
                                            <div>
                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(route)}" :class="[ `text-[${getNodeTextColor(route)}]` ]">
                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(route)?.short_name ?? "?" }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
                                            <div class="font-medium text-gray-900">{{ findNodeById(route)?.long_name || '???' }}</div>
                                            <div>Hex ID: !{{ Number(route).toString(16) }}</div>
                                            <div>Forwarded the packet</div>
                                        </div>
                                    </li>

                                    <!-- node that replied to traceroute -->
                                    <li @click="$emit('goTo', state.selectedTraceRoute.from)" v-if="state.selectedTraceRoute.from" class="relative flex gap-x-4">
                                        <div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
                                            <div class="w-px bg-gray-200"></div>
                                        </div>
                                        <div class="my-auto relative flex flex-none items-center justify-center">
                                            <div>
                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.from)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.from)}]` ]">
                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.from)?.short_name ?? "?" }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
                                            <div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.from)?.long_name || '???' }}</div>
                                            <div>Hex ID: !{{ Number(state.selectedTraceRoute.from).toString(16) }}</div>
                                            <div>Replied to traceroute</div>
                                        </div>
                                    </li>

                                    <!-- node that gated traceroute to mqtt -->
                                    <li @click="$emit('goTo', state.selectedTraceRoute.gateway_id)" v-if="state.selectedTraceRoute.gateway_id" class="relative flex gap-x-4">
                                        <div class="absolute left-0 top-0 flex w-12 justify-center h-6">
                                            <div class="w-px bg-gray-200"></div>
                                        </div>
                                        <div class="my-auto relative flex flex-none items-center justify-center">
                                            <div>
                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.gateway_id)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.gateway_id)}]` ]">
                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.gateway_id)?.short_name ?? "?" }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
                                            <div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.gateway_id)?.long_name || '???' }}</div>
                                            <div>Hex ID: !{{ Number(state.selectedTraceRoute.gateway_id).toString(16) }}</div>
                                            <div>Gated the packet to MQTT</div>
                                        </div>
                                    </li>

                                </ul>

                            </div>

                            <div>
                                <div class="bg-gray-200 p-2 font-semibold">Raw Data</div>
                                <div class="text-sm text-gray-700">
                                    <pre class="bg-gray-100 rounded-sm p-2 overflow-x-auto">{{ JSON.stringify(state.selectedTraceRoute, null, 4) }}</pre>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>