<template>
    <Listbox v-model="selected" :name="name" class="">
        <div class="relative">
            <ListboxButton
                class="bg-transparent flex h-8 items-center justify-start gap-1 disabled:text-gray-200 formkit-loading:cursor-not-allowed disabled:cursor-not-allowed flex-1 text-xs font-semibold rounded-[4px]"
                :class="light ? 'text-blue-300' : 'text-white'"
            >
                <svg
                    fill="none"
                    height="16"
                    viewBox="0 0 16 16"
                    width="16"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M2.3999 6H13.5999"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M2.3999 10H13.5999"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M7.66677 2C6.54367 3.79974 5.94824 5.87858 5.94824 8C5.94824 10.1214 6.54367 12.2003 7.66677 14"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M8.33325 2C9.45636 3.79974 10.0518 5.87858 10.0518 8C10.0518 10.1214 9.45636 12.2003 8.33325 14"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                </svg>

                <span class="block underline truncate"
                    >{{ selected.name }}
                </span>
                <span class="flex items-center pointer-events-none">
                    <svg
                        class="icon icon-tabler icon-tabler-chevron-down"
                        fill="none"
                        height="20"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                        viewBox="0 0 24 24"
                        width="20"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path d="M0 0h24v24H0z" fill="none" stroke="none" />
                        <polyline points="6 9 12 15 18 9" />
                    </svg>
                </span>
            </ListboxButton>

            <transition
                leave-active-class="transition duration-100 ease-in"
                leave-from-class="opacity-100"
                leave-to-class="opacity-0"
            >
                <ListboxOptions
                    class="absolute w-[140px] z-50 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                    :class="$i18n.locale === 'en' ? 'right-0' : 'left-0'"
                >
                    <ListboxOption
                        v-for="language in languages"
                        :key="language.name"
                        v-slot="{ langs, selected }"
                        :value="language"
                        as="template"
                    >
                        <li
                            :class="[
                                langs || selected
                                    ? 'bg-blue-100 text-blue-300'
                                    : 'text-gray-700',
                                'relative !cursor-pointer select-none py-2 pl-10 pr-4',
                            ]"
                        >
                            <span
                                :class="[
                                    selected ? 'font-medium' : 'font-normal',
                                    'block truncate',
                                ]"
                                >{{ language.name }}
                            </span>
                            <span
                                v-if="selected"
                                class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600"
                            >
                                <CheckIcon aria-hidden="true" class="w-5 h-5" />
                            </span>
                        </li>
                    </ListboxOption>
                </ListboxOptions>
            </transition>
        </div>
    </Listbox>
</template>

<script setup>
import { ref } from "vue";
import { loadLanguageAsync } from "laravel-vue-i18n";

import {
    Listbox,
    ListboxButton,
    ListboxOption,
    ListboxOptions,
} from "@headlessui/vue";

import { CheckIcon } from "@heroicons/vue/solid";
import { onMounted, watch, computed } from "vue";
import { i18n } from "@/assets/locales/l180loca.js";
const props = defineProps({
    selected: {
        type: Number,
        default: () => 0,
    },
    name: {
        type: String,
        default: () => "language",
    },
    light: {
        type: Boolean,
        default: () => false,
    },
});

const languages = [
    {
        name: "English",
        code: "en",
    },
    {
        name: "العربية",
        code: "ar",
    },
];

const selected = ref(languages[props.selected]);
var langs = ref(null);

onMounted(() => {
    // ref value
    localStorage.getItem("selected_ar")
        ? (selected.value = languages[1])
        : (selected.value = languages[0]);
    //  i18n local

    localStorage.getItem("selected_ar")
        ? (i18n.global.locale = localStorage.getItem("selected_ar"))
        : (i18n.global.locale = localStorage.getItem("selected_en"));
});
const statelang = (val) => {
    if (val == "English") {
        localStorage.setItem("selected_en", "en");
        selected.value = languages[0];
        loadLanguageAsync("en");
        i18n.global.locale = localStorage.getItem("selected_en");
        localStorage.removeItem("selected_ar");
    } else if (val == "العربية") {
        localStorage.setItem("selected_ar", "ar");
        selected.value = languages[1];
        loadLanguageAsync("ar");
        i18n.global.locale = localStorage.getItem("selected_ar");
        localStorage.removeItem("selected_en");
    }
};
watch(selected, (val) => {
    statelang(val.name);
});
</script>
