<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink } from 'vue-router'
import languageNames from '../scripts/languageNames.ts'
import countryNames from '../scripts/countryNames.ts'
import Icon from './Icon.vue'
// get data from props
const { data, count, id, type, range } = defineProps({
    data: {
        type: Object,
        required: true,
    },
    count: {
        type: Number,
        required: true,
    },
    id: {
        type: String,
        required: true,
    },
    type: {
        type: String,
        required: true,
    },
    range: {
        type: Number,
        required: false,
    }
})

const sortObj = (obj: object): object => {
    const entries = Object.entries(obj);

    entries.sort((a, b) => b[1] - a[1]);

    const sortedObj = Object.fromEntries(entries);

    return sortedObj
}


const formatter = Intl.NumberFormat('en', { notation: 'compact' });
</script>
<template>
    <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700" >
        <li class="py-3 sm:py-4" v-for="(i, index) in sortObj(data)">
            <div class="flex items-center">
                <div class="flex-1 min-w-0 ms-4">
                    <p class="text-sm font-medium text-gray-900 truncate dark:text-white font-mono">
                        <Icon :type="type" :data="index" class="inline-block mr-1" />
                        <span><NuxtLink :to="`/websites/data/${id}?${type}=${encodeURIComponent(index)}&range=${range || ''}`">
                            <span v-if="type == 'screen'">{{ index.replace(',', 'x') }}</span>
                            <span v-else-if="type == 'referrer' && (index == '' || index == 'undefined')">[None]</span>
                            <span v-else-if="type == 'language'">{{ languageNames[index] }}</span>
                            <span v-else-if="type == 'country_code'">{{ countryNames[index] || index }}</span>
                            <span v-else-if="type == 'device'">{{ index.slice(0, 1).toUpperCase() + index.slice(1).toLowerCase() }}</span>
                            <span v-else>{{ index }}</span>
                        </NuxtLink></span>
                    </p>
                </div>
                <div class="inline-flex items-center text-base text-gray-900 dark:text-white me-4 font-mono">
                    <span class="font-semibold mr-1">{{ formatter.format(i) }}</span>
                    <span class="rounded text-sm p-1 ml-1 opacity-60">{{ Math.round(i / count * 100) }}%</span>
                </div>
            </div>
        </li>
    </ul>
    <p class="text-center" v-if="Object.keys(data).length == 0">
        No Data Available
    </p>
</template>