<template>
    <div class="compare-selection">
        <div>
            <h2>{{ $t('selectProductCompare') }}</h2>
            <Button icon="isax isax-close-circle" severity='secondary' rounded text @click="dialog.close()" />
        </div>
        <div>
            <div>
                <i class="isax isax-search-normal-1" />
                <input v-model="query" :placeholder="$t('searchInPorducts')" />
            </div>
            <div>
                <span>{{ $t('topProductToCompare') }}</span>
                <span>{{ $t('commodity') }} {{ count }}</span>
            </div>
            <div>
                <ul>
                    <li v-for="(product, i) in store.items" :key="i" @click="add(product.id)">
                        <ProductCard :data="product" type="main" />
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
const dialog = inject('dialogRef')

const query = ref()
const count = ref(759)
const route = useRoute()
const router = useRouter()
const store = useProductsStore()
const ids = route.params.ids.split('-')
store.compareSearch(ids)
watch(query, (v) => store.compareSearch(ids, v))
const add = (id) => {
    if (!ids.includes(id)){
        dialog.value.close()
        router.push(`/compare/${[...ids, id].join('-')}`)
    }
       
}
</script>

<style lang="scss">
.compare-selection {
    @apply w-full lg:w-[64.8rem] lg:h-[53.2rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col lg:pb-[4.9rem];

    &>div:nth-of-type(1) {
        @apply flex justify-between items-center gap-3 p-6 lg:p-8 pb-6 border lg:border-b-2 border-[#E5E5E5];

        h2 {
            @apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
        }

        button {
            @apply -m-3;

            .p-button-icon {
                @apply text-[1.4em] lg:text-3xl text-[#B2B2B2];
            }
        }
    }

    &>div:nth-of-type(2) {
        @apply w-full flex flex-col p-6 pt-8 lg:p-10 lg:pb-0 gap-6;

        &>div:nth-of-type(1) {
            @apply w-full h-[3.4rem] bg-[#FAFAFA] rounded-[0.6rem] flex items-center pr-4;

            i {
                @apply text-lg;
            }

            input {
                @apply h-full px-2 bg-transparent grow outline-none;

                &::placeholder {
                    @apply text-neutral-400 text-xs lg:text-lg font-vazir;
                }
            }
        }

        &>div:nth-of-type(2) {
            @apply w-full flex justify-between items-center;

            span {
                @apply text-[#7F7F7F] text-xs lg:text-base font-medium font-vazir;
            }

        }

        &>div:nth-of-type(3) {
            @apply overflow-y-auto h-[23.8rem] lg:h-[34.4rem] w-full;

            &>ul {
                @apply w-full grid lg:grid-cols-2 lg:gap-6 h-max;

                li {
                    @apply cursor-pointer;

                    a {
                        @apply pointer-events-none;
                    }

                    .product-card {
                        @apply lg:w-[28.8rem] lg:h-[32.3rem];
                    }

                    @media (max-width: 1024px) {
                        .product-card {
                            @apply w-full h-[9.4rem] flex-row shadow-none border-0 rounded-none gap-4 p-0;
                            @apply mt-[1.1rem] border-b border-[#E5E5E5];

                            &>img {
                                @apply w-[7.4rem] h-[7.4rem] object-contain object-top self-start;
                            }

                            &>div {
                                @apply pb-6;

                                h2 {
                                    @apply mt-0 text-[0.7em];
                                }

                                h1 {
                                    @apply text-xs;
                                }

                                &>button {
                                    @apply left-0 bottom-4;

                                    .p-button-icon {
                                        @apply text-xl;
                                    }
                                }
                            }
                        }
                    }
                }

            }


        }
    }


}
</style>