<script setup>
const emit = defineEmits(['reload', 'randomNode', 'searchClick']);
import { ref } from 'vue';
import { state, searchedNodes } from '../store.js';
import { getNodeColor, getNodeTextColor } from '../utils.js';
</script>

<template>
    <div class="flex bg-white p-2 border-gray-300 border-b h-16">

        <!-- close mobile search button -->
        <div v-if="state.mobileSearchVisible" class="my-auto">
            <a @click="state.mobileSearchVisible = false" href="javascript:void(0)" class="rounded-full">
                <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" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                    </svg>
                </div>
            </a>
        </div>

        <!-- icon -->
        <div v-if="!state.mobileSearchVisible" class="hidden sm:block my-auto mr-3">
            <img class="w-10 h-10 rounded" src="/images/icon.png"/>
        </div>

        <!-- app info -->
        <div v-if="!state.mobileSearchVisible" class="my-auto leading-tight">
            <div class="font-bold">CT Mesh Map</div>
            <div class="text-sm">
                Created by <a class="link" target="_blank" href="https://liamcottle.com">Liam Cottle</a>
            </div>
        </div>

        <!-- search bar -->
        <div class="mx-3 flex-1 relative" :class="{ 'hidden lg:block': !state.mobileSearchVisible }">
            <input v-model="state.searchText" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" :placeholder="`Search ${state.nodes.length} nodes...`">
            <div v-if="state.searchText !== ''" class="absolute z-search bg-white w-full border border-gray-200 rounded-lg shadow-md mt-1 overflow-y-scroll max-h-80 divide-y divide-gray-200">

                <template v-if="searchedNodes.length > 0">
                    <div @click="$emit('searchClick', node)" class="flex space-x-2 p-2 hover:bg-gray-100 cursor-pointer" v-for="node of searchedNodes">
                        <div>
                            <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(node.node_id)}" :class="[ `text-[${getNodeTextColor(node.node_id)}]` ]">
                                <div class="mx-auto my-auto drop-shadow-sm">{{ node.short_name }}</div>
                            </div>
                        </div>
                        <div>
                            <div class="text-gray-900" :class="{ 'text-red-500': node.latitude == null || node.longitude == null }">{{ node.long_name !== '' ? node.long_name : "-" }}</div>
                            <div class="flex space-x-1 text-sm text-gray-700">
                                <div>{{ node.node_id_hex }} / {{ node.node_id }}</div>
                            </div>
                        </div>
                    </div>
                    <div v-if="searchedNodes.length === 500" class="text-gray-500 text-sm px-2 py-1">
                        Only the first 500 results are shown.
                    </div>
                </template>

                <template v-else>
                    <div class="p-2">
                        No results found...
                    </div>
                </template>

            </div>
        </div>

        <!-- header action buttons -->
        <div v-if="!state.mobileSearchVisible" class="flex my-auto ml-auto mr-0 sm:mr-2 space-x-1 sm:space-x-2">
            <a @click="state.infoModalVisible = !state.infoModalVisible" href="javascript:void(0)" class="tooltip rounded-full">
                <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" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
                    </svg>
                </div>
                <div class="hidden sm:block">
                    <span class="tooltip-text">About</span>
                </div>
            </a>
            <a @click="state.mobileSearchVisible = true" href="javascript:void(0)" class="tooltip rounded-full block lg:hidden">
                <div id="search-button" 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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
                        <path d="M21 21l-6 -6"></path>
                    </svg>
                </div>
                <div class="hidden sm:block">
                    <span class="tooltip-text">Search</span>
                </div>
            </a>
            <a @click="state.hardwareStatsVisible = !state.hardwareStatsVisible" href="javascript:void(0)" class="tooltip rounded-full hidden sm:block">
                <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" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
                    </svg>
                </div>
                <div class="hidden sm:block">
                    <span class="tooltip-text">Devices</span>
                </div>
            </a>
            <a href="#" class="tooltip rounded-full hidden lg:block" @click="$emit('randomNode')">
                <div id="random-button" 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 4l3 3l-3 3"></path>
                        <path d="M18 20l3 -3l-3 -3"></path>
                        <path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5"></path>
                        <path d="M21 7h-5a4.978 4.978 0 0 0 -3 1m-4 8a4.984 4.984 0 0 1 -3 1h-3"></path>
                    </svg>
                </div>
                <div class="hidden sm:block">
                    <span class="tooltip-text">Random</span>
                </div>
            </a>
            <a @click="state.settingsVisible = !state.settingsVisible" href="javascript:void(0)" class="tooltip rounded-full">
                <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" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    </svg>
                </div>
                <div class="hidden sm:block">
                    <span class="tooltip-text">Settings</span>
                </div>
            </a>
            <a href="#" class="tooltip rounded-full" @click="$emit('reload')">
                <div id="reload-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full" :class="{'animate-spin': state.loading}">
                    <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="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"></path>
                        <path d="M20 4v5h-5"></path>
                    </svg>
                </div>
                <div class="hidden sm:block">
                    <span class="tooltip-text">Reload</span>
                </div>
            </a>
        </div>
    </div>
</template>