<template>
    <Listbox v-model="selected" :name="name" class="">
        <div class="relative">
            <ListboxButton
                class="bg-white flex w-[120px] min-h-[30px] max-h-[34px] h-full items-center justify-between disabled:text-gray-200 formkit-loading:cursor-not-allowed disabled:cursor-not-allowed border flex-1 border-blue-200 text-blue-300 text-xs font-medium px-2 rounded-[4px]"
            >
                <Flag
                    :code="selected.code"
                    class="overflow-hidden rounded-md"
                />
                <span class="block 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 bg-white left-1/2 -translate-x-1/2 z-50 top-[35px] mt-1 px-1 max-h-64 py-1 w-[140px] overflow-auto flex flex-col gap-1 rounded-md shadow text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                >
                    <ListboxOption
                        v-for="option in currencies"
                        :key="option.name"
                        v-slot="{ active, selected }"
                        :value="option"
                        as="template"
                    >
                        <li
                            :class="[
                                active || selected
                                    ? 'bg-blue-300 text-white'
                                    : 'bg-blue-200 text-gray-300',
                                '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>
import { onMounted, ref, watch } from "vue";

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

import Flag from "@/components/Flag";
export default {
    props: {
        name: {
            type: String,
            default: () => "currency",
        },
    },
    data() {
        return {
            currencies: [
                {
                    name: "USD",
                    code: "us",
                },
                {
                    name: "SAR",
                    code: "sa",
                },
                {
                    name: "AED",
                    code: "ae",
                },
                {
                    name: "EGP",
                    code: "eg",
                },
            ],
            selected: {
                name: "USD",
                code: "us",
            },
        };
    },
    components: {
        Listbox,
        ListboxButton,
        ListboxOption,
        ListboxOptions,
        Flag,
    },
    methods: {
        getInitialCurrency() {
            const currency = localStorage.getItem("currency");
            if (currency) {
                const found = this.currencies.find((c) => c.name === currency);
                if (found)
                    return this.currencies.find((c) => c.name === currency);
            }
            if (!this.selected) {
                this.selected = this.currencies[0];
            }
            localStorage.setItem(
                "currency",
                this.currencies[this.selected]?.name || "USD"
            );
            return this.currencies.find((c) => c.name === this.selected.name);
        },
    },
    beforeMount() {
        this.selected = this.getInitialCurrency();
    },
    watch: {
        selected(val) {
            this.$page.props.currency = val.name;
            localStorage.setItem("currency", val.name);
        },
    },
};
</script>
