<template>
    <div class="products-sort-popup">
        <div>
            <Button v-bind="btns.close.props" @click="dialog.close()" />
            <h2>{{ $t("sortBy") }}</h2>
        </div>
        <ul>
            <li v-for="(item, i) in sorts" :key="i">
                <h3 @click="select(item)" v-ripple>
                    {{ $t(item) }}
                </h3>
                <i v-if="sort == item" class="isax isax-tick-circle" />
            </li>
        </ul>
    </div>
</template>

<script setup>
const { meta } = useRoute()
const { btns, sorts } = meta.init
const dialog = inject('dialogRef')

const { query } = useRoute()
const sort = ref(query.sort || "mostVisited");
const router = useRouter()
const select = (key) => {
    router.push({ path: '/search', query: {...query, sort: key} })
    dialog.value.close()
}
</script>

<style lang="scss">
.products-sort-popup {
    @apply w-full h-max flex flex-col gap-9 p-6 bg-white rounded-t-[0.6rem];

    &>div {
        @apply flex items-center gap-3;

        &>button {
            @apply -mx-4 -my-3 text-[#333333] text-[1.4em] #{!important};
        }

        &>h2 {
            @apply text-[#333333] text-sm font-medium font-vazir;
        }
    }

    &>ul {
        @apply w-full flex flex-col gap-4;

        &>li {
            @apply flex items-center justify-between pb-4 border-b last:border-b-0 text-[#333333];

            h3 {
                @apply text-xs font-medium font-vazir overflow-hidden relative;
            }
        }
    }
}
</style>
