<template>
    <div class="factor-filters">
        <div v-if="device == 'mobile'">
            <Button v-bind="btns.close.props" @click="dialog.close()" />
            <h2>{{ $t("sortBy") }}</h2>
        </div>
        <ul>
            <li v-for="(s, i) in switches" :key="i">
                <label :for="s">
                    {{ $t("searchBy" + s[0].toUpperCase() + s.slice(1)) }}
                </label>
                <InputSwitch v-model="filters[s]" :value="s" :inputId="s" />
            </li>
            <li v-for="(r, i) in radios" :key="i">
                <label :for="r">{{ $t(r) }}</label>
                <RadioButton v-model="filters[sort]" :value="r" :inputId="r" />
            </li>
        </ul>
    </div>
</template>

<script setup>
import init from '../../initialize/panel.js'

const { btns, radios, switches } = init();
const { device } = inject('service')
const dialog = inject('dialogRef')
const filters = defineModel({ default: {} });
</script>

<style lang="scss">
.factor-filters {
    @apply lg:w-[17.8rem] lg:h-[19.1rem] bg-white rounded-t-2xl lg:rounded-2xl lg:border p-6 lg:p-8;
    @apply flex flex-col gap-9 rtl;

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

        &>button {
            @apply -mx-5 -my-3 text-[#333333] text-xl #{!important};
        }

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

    ul {
        @apply flex flex-col gap-[1.1rem] lg:gap-4;

        li {
            @apply w-full flex justify-between items-center;

            &:nth-child(2) {
                @apply border-b pb-4;
            }

            label {
                @apply text-[#333333] text-xs lg:text-[1.1em] font-medium font-vazir cursor-pointer;
            }

            .p-inputswitch {
                @apply w-8 h-[1.1rem] lg:w-6 lg:h-4;

                .p-inputswitch-slider {
                    @apply bg-[#A6A6A6];
                    @apply w-8 h-[1.1rem] lg:w-6 lg:h-4 hover:bg-[#929191] border-0 #{!important};

                    &::before {
                        @apply w-3 h-3 left-1 lg:w-2.5 lg:h-2.5 lg:left-0.5 mt-0 top-1/2 -translate-y-1/2 bg-white;
                    }
                }
            }

            .p-inputswitch-checked .p-inputswitch-slider {
                @apply bg-primary-600 hover:bg-primary-600 #{!important};

                &::before {
                    @apply translate-x-3 lg:translate-x-2;
                }
            }

            .p-radiobutton-checked {
                .p-radiobutton-box {
                    @apply bg-white border-primary-600 border hover:bg-white #{!important};

                    .p-radiobutton-icon {
                        @apply w-2.5 h-2.5 bg-primary-600;
                    }
                }
            }
        }
    }
}
</style>
