<template>
    <Menu as="div" class="relative inline-block text-left">
        <div>
            <MenuButton
                class="inline-flex items-center justify-center w-full gap-2 px-4 py-2 text-sm font-medium text-blue-300 bg-white border-none rounded-lg shadow-sm outline-none hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:ring-offset-2 focus:ring-offset-blue-300"
            >
                <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <g clip-path="url(#clip0_922_64843)">
                        <path
                            d="M4 6H13"
                            stroke="#29419B"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                        <path
                            d="M4 12H11"
                            stroke="#29419B"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                        <path
                            d="M4 18H11"
                            stroke="#29419B"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                        <path
                            d="M15 15L18 18L21 15"
                            stroke="#29419B"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                        <path
                            d="M18 6V18"
                            stroke="#29419B"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                    </g>
                    <defs>
                        <clipPath id="clip0_922_64843">
                            <rect width="24" height="24" fill="white" />
                        </clipPath>
                    </defs>
                </svg>
                {{ $t("Register.sort_by") }}

                <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M11.06 5.72656L8 8.7799L4.94 5.72656L4 6.66656L8 10.6666L12 6.66656L11.06 5.72656Z"
                        fill="#29419B"
                    />
                </svg>
            </MenuButton>
        </div>

        <transition
            enter-active-class="transition duration-100 ease-out"
            enter-from-class="transform scale-95 opacity-0"
            enter-to-class="transform scale-100 opacity-100"
            leave-active-class="transition duration-75 ease-in"
            leave-from-class="transform scale-100 opacity-100"
            leave-to-class="transform scale-95 opacity-0"
        >
            <MenuItems
                class="absolute z-10 flex flex-col w-56 gap-1 mt-2 origin-top-right bg-white rounded-md shadow-lg rtl:left-0 ltr:right-0 ring-1 ring-black ring-opacity-5 focus:outline-none"
            >
                <!-- price -->

                <div class="flex-1">
                    <MenuItem v-slot="{ active }">
                        <button
                            @click="sort('price', 'desc')"
                            :class="[
                                active ? ' text-blue-300' : 'text-gray-200',
                                ' px-4 py-2 text-xs font-medium flex w-full rounded-sm items-center justify-start gap-2',
                            ]"
                        >
                            {{ $t("Register.price_high_to_low") }}
                        </button>
                    </MenuItem>
                </div>
                <div class="flex-1">
                    <MenuItem v-slot="{ active }">
                        <button
                            @click="sort('price', 'asc')"
                            :class="[
                                active ? ' text-blue-300' : 'text-gray-200',
                                ' px-4 py-2 text-xs font-medium flex w-full rounded-sm items-center justify-start gap-2',
                            ]"
                        >
                            {{ $t("Register.price_low_to_high") }}
                        </button>
                    </MenuItem>
                </div>
                <!-- rating -->
                <div class="flex-1">
                    <MenuItem v-slot="{ active }">
                        <button
                            @click="sort('rate', 'desc')"
                            :class="[
                                active ? ' text-blue-300' : 'text-gray-200',
                                ' px-4 py-2 text-xs font-medium flex w-full rounded-sm items-center justify-start gap-2',
                            ]"
                        >
                            {{ $t("Register.rating_high_to_low") }}
                        </button>
                    </MenuItem>
                </div>

                <div class="flex-1">
                    <MenuItem v-slot="{ active }">
                        <button
                            @click="sort('rate', 'asc')"
                            :class="[
                                active ? ' text-blue-300' : 'text-gray-200',
                                ' px-4 py-2 text-xs font-medium flex w-full rounded-sm items-center justify-start gap-2',
                            ]"
                        >
                            {{ $t("Register.rating_low_to_high") }}
                        </button>
                    </MenuItem>
                </div>
                <!-- date -->
                <div class="flex-1">
                    <MenuItem v-slot="{ active }">
                        <button
                            @click="sort('date', 'asc')"
                            :class="[
                                active ? ' text-blue-300' : 'text-gray-200',
                                ' px-4 py-2 text-xs font-medium flex w-full rounded-sm items-center justify-start gap-2',
                            ]"
                        >
                            {{ $t("Register.date_oldest_first") }}
                        </button>
                    </MenuItem>
                </div>

                <div class="flex-1">
                    <MenuItem v-slot="{ active }">
                        <button
                            @click="sort('date', 'desc')"
                            :class="[
                                active ? ' text-blue-300' : 'text-gray-200',
                                ' px-4 py-2 text-xs font-medium flex w-full rounded-sm items-center justify-start gap-2',
                            ]"
                        >
                            {{ $t("Register.date_newest_first") }}
                        </button>
                    </MenuItem>
                </div>
            </MenuItems>
        </transition>
    </Menu>
</template>

<script>
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
import { addUrlParam, getParams } from "@/composables/urlParams";

export default {
    components: {
        Menu,
        MenuButton,
        MenuItem,
        MenuItems,
    },
    methods: {
        sort(sort, dir) {
            addUrlParam({ name: "sortBy", value: sort });
            addUrlParam({ name: "direction", value: dir });
            this.$emit("fetch");
        },
    },
};
</script>
