<template>
    <button id="button-dropdown-locales" data-dropdown-toggle="dropdown-locales" type="button"
            class="rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700">
        <div class="w-5 h-5 flex items-center justify-center">
            <div class="dark:invert">
                <svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                    width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 466.337 466.337">
                    <g><path d="M233.168,0C104.604,0,0,104.604,0,233.168c0,128.565,104.604,233.169,233.168,233.169 c128.565,0,233.169-104.604,233.169-233.169C466.337,104.604,361.733,0,233.168,0z M223.984,441.874 c-22.321,0-46.405-41.384-59.045-107.815h118.067C270.371,400.49,246.316,441.874,223.984,441.874z M161.114,310.144 c-2.738-19.991-4.437-41.781-4.881-65.018H291.74c-0.443,23.237-2.148,45.027-4.869,65.018H161.114z M24.521,245.126h107.704 c0.443,21.883,2.09,43.859,4.887,65.018H38.768C30.693,289.826,25.818,267.966,24.521,245.126z M223.984,24.464 c21.982,0,45.687,40.14,58.484,104.877h-116.97C178.286,64.604,201.996,24.464,223.984,24.464z M286.463,153.245 c2.978,20.785,4.811,43.596,5.277,67.966H156.222c0.467-24.37,2.295-47.169,5.272-67.966H286.463z M132.226,221.211H24.521 c1.354-23.926,6.568-46.836,15.332-67.966h97.656C134.462,175.32,132.681,198.312,132.226,221.211z M315.749,245.126h126.065 c-1.296,22.84-6.188,44.7-14.246,65.018H310.855C313.646,288.985,315.305,267.009,315.749,245.126z M315.749,221.211 c-0.468-22.898-2.254-45.891-5.29-67.966h116.023c8.77,21.13,13.978,44.04,15.332,67.966H315.749z M414.596,129.33H306.617 c-7.894-42.067-20.727-78.844-38.195-102.222C330.952,37.799,384.06,76.205,414.596,129.33z M176.073,32.036 c-15.7,23.459-27.348,58.1-34.699,97.305H51.741C78.657,82.505,123.064,47.1,176.073,32.036z M49.96,334.058h90.895 c7.311,40.403,19.133,76.205,35.219,100.26C121.944,418.904,76.672,382.378,49.96,334.058z M268.41,439.222 c17.865-23.938,30.874-61.889,38.697-105.164h109.274C386.15,388.743,332.12,428.339,268.41,439.222z"/></g>
                </svg>
            </div>
        </div>
    </button>

    <div id="dropdown-locales" class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600">
        <ul class="p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="button-dropdown-locales">
            
            <li v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`">
                <input :id="`radio-locale-${locale}`" type="radio" :value="locale" name="locale" class="hidden" v-model="$i18n.locale" :onChange="changeLocale">
                <label :for="`radio-locale-${locale}`" class="text-sm font-medium uppercase text-gray-900 rounded dark:text-gray-300 ">
                    <div class="flex items-center p-2 px-5 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                        {{ locale }}
                    </div>
                </label>
            </li>

        </ul>
    </div>
</template>

<script setup lang="ts">
    import { Dropdown } from "flowbite";
    import { setLocale } from "@/utilities/locale_handler";

    function changeLocale(e:any) {
        setLocale(e.target.value);
    }
</script>
