<script setup>
import axios from 'axios';
import { state } from '../store.js';
import { buildPath } from '../utils.js';
import { ref, onMounted } from 'vue';
const hardwareModelStats = ref([]);
onMounted(() => {
    axios.get(buildPath('/api/v1/stats/hardware-models')).then((response) => {
        hardwareModelStats.value = response.data.hardware_model_stats;
    }).catch((error) => {
        // do nothing
    });
});
</script>

<template>
    <!-- hardware models sidebar -->
    <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.hardwareStatsVisible" @click="state.hardwareStatsVisible = !state.hardwareStatsVisible" 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.hardwareStatsVisible" class="fixed top-0 left-0 bottom-0">
                <div 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">Meshtastic Devices</h2>
                                    <h3 class="text-sm">Ordered by most popular</h3>
                                </div>
                                <div class="my-auto ml-3 flex h-7 items-center">
                                    <a href="javascript:void(0)" class="rounded-full" @click="state.hardwareStatsVisible = false">
                                        <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>

                        <!-- list of hardware models -->
                        <ul role="list" class="flex-1 divide-y divide-gray-200 overflow-y-auto">
                            <li v-for="hardwareModel of hardwareModelStats">
                                <div class="group relative flex items-center">
                                    <a href="#" class="block flex-1 px-4 py-2">
                                        <div class="absolute inset-0 group-hover:bg-gray-100" aria-hidden="true"></div>
                                        <div class="relative flex min-w-0 flex-1 items-center">
                                            <span class="relative inline-block flex-shrink-0 mr-4">
                                                <img class="h-20 w-20 rounded-sm object-contain" :src="`/images/devices/${hardwareModel.hardware_model_name}.png`" alt="" onerror="if(this.src != '/images/no_image.png') this.src = '/images/no_image.png';">
                                            </span>
                                            <div class="truncate">
                                                <p class="truncate text-sm font-medium text-gray-900">{{ hardwareModel.hardware_model_name }}</p>
                                                <p class="truncate text-sm text-gray-500">{{ hardwareModel.count }} nodes on the map</p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                        </ul>

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