<template>
    <Listbox v-model="selected" :name="name" class="">
        <div class="relative">
            <ListboxButton
                class="flex-1 flex items-center gap-1 justify-between px-0.5 h-10 bg-white border-2 border-blue-200 rounded-lg text-base text-gray-300 placeholder-gray-200 focus:outline-transparent focus:ring-transparent"
            >
                <Flag
                    :code="selected.code"
                    class="overflow-hidden rounded-md"
                />
                <span class="text-xs text-gray-200" v-if="showCode">
                    {{ selected.value }}
                </span>
                <span class="flex items-center pointer-events-none">
                    <svg
                        class="text-gray-200 icon icon-tabler icon-tabler-chevron-down"
                        fill="none"
                        height="20"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        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 left-1/2 -translate-x-1/2 z-50 top-[45px] mt-1 max-h-64 p-4 w-[180px] overflow-auto flex flex-col gap-2 rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                >
                    <ListboxOption
                        v-for="option in countries"
                        :key="option.name"
                        v-slot="{ active, selected }"
                        :value="option"
                        as="template"
                    >
                        <li
                            :class="[
                                active || selected
                                    ? 'bg-blue-200 text-gray-300'
                                    : 'bg-white text-blue-300',
                                'bg-white h-[30px] flex transition-colors !cursor-pointer items-center justify-start gap-1 disabled:text-gray-200 formkit-loading:cursor-not-allowed disabled:cursor-not-allowed border w-full border-blue-200 text-sm font-medium  px-2 rounded-[4px]',
                            ]"
                        >
                            <Flag
                                :code="option.code"
                                class="overflow-hidden rounded-md"
                            />
                            <span :class="['font-normal', 'block truncate']">{{
                                option.name
                            }}</span>
                        </li>
                    </ListboxOption>
                </ListboxOptions>
            </transition>
        </div>
    </Listbox>
</template>

<script setup>
import { defineEmits, ref, watch } from "vue";

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

import Flag from "@/components/Flag";

const props = defineProps({
    code: {
        type: String,
        default: () => "+sa",
    },
    name: {
        type: String,
        default: () => "country",
    },
    showCode: {
        type: Boolean,
        default: () => false,
    },
});

const emit = defineEmits();

const countries = [
    {
        name: "SA +966",
        code: "sa",
        value: "+966",
    },
    {
        name: "US +1",
        code: "us",
        value: "+1",
    },

    {
        name: "AE +971",
        code: "ae",
        value: "+971",
    },
    {
        name: "EG +20",
        code: "eg",
        value: "+20",
    },
];

const selected = ref(
    countries.find((country) => {
        return country.code.toLowerCase() == props.code.toLowerCase();
    }) || countries[0]
);

watch(selected, (val) => {
    emit("update:code", val.code);
});
</script>
