<template>
    <NuxtLayout :name="device" :config="config">
        <main class="seller-new-product">
            <aside v-if="device == 'desktop'">
                <PanelSellerProfile />
                <PanelSellerScore />
            </aside>
            <section>
                <div>
                    <template v-for="i in 3" :key="i">
                        <span v-text="i" :class="{ 'active': i == step, 'past': i < step }" />
                        <hr :class="{ 'past': i < step }" />
                    </template>
                </div>
                <Transition name="fade" mode="out-in">
                    <PanelSellerStepFirst v-if="step == 1" />
                    <PanelSellerStepSecond v-else-if="step == 2" />
                    <PanelSellerStepThirdy v-else-if="step == 3" />
                </Transition>
            </section>
        </main>
    </NuxtLayout>
</template>

<script setup>
import init from '../../../initialize/new-product.js'
provide('init', init())

const { device, t } = inject('service')
const config = reactive({
    desktop: { toolbar: true, seller: true },
    mobile: { header: { back: true, toolbar: true, title: t('userPanel') }, navigation: false },
})

const { query } = useRoute()

const step = ref(1)
provide('step', step)

const { status, data, error } = await useFetch('/api/shop/newProduct', {
    headers: {
        Authorization: useCookie('token')
    },
})

if (status.value == 'success')
    provide('data', data.value)
else throw createError(error.value)

const form = ref({
    specs: {
        [t("weight")]: "",
        [t("dimensions")]: "",
        [t("color")]: "",
    },
    images: [null]
})

if (query.id) {
    const { status, data } = await useFetch(`/api/products/id/${query.id}`, {
        headers: {
            Authorization: useCookie('token')
        },
    })

    if (status.value == 'success') {
        form.value = data.value
        form.value.subCategory =
            form.value.category.length > 1 ? form.value.category.slice(-1)[0] : null
        form.value.category =
            form.value.category.length > 2 ? form.value.category[1] : form.value.category[0]
    }
}

provide('form', form.value)
</script>

<style lang="scss">
.seller-new-product {
    @apply container flex pt-[1.9rem] pb-4 lg:pt-14 max-lg:px-6 gap-6 relative;

    aside {
        @apply flex flex-col gap-3 lg:gap-5;
    }

    &>section {
        @apply flex flex-col gap-9 grow;

        &>div:not([class]) {
            @apply w-full h-max flex justify-between items-center gap-2;

            hr {
                @apply grow h-0.5 bg-[#333333] last:hidden;
            }

            hr.past {
                @apply bg-[#47B556];
            }

            span {
                @apply w-6 h-6 lg:w-[1.9rem] lg:h-[1.9rem] rounded-full flex justify-center items-center;
                @apply text-xs lg:text-base font-medium font-vazir border border-[#333333];
            }

            span.past {
                @apply text-white bg-[#47B556] border-[#47B556];

            }

            span.active {
                @apply border-[#47B556] text-[#47B556];
            }

        }
    }

}

body:has(.seller-new-product) {

    .p-dropdown-panel:has(.p-dropdown-filter-container) {
        @apply w-[18.3rem] translate-y-3 pb-4 pt-[0.6rem] rounded-[0.6rem];

        .p-dropdown-header {
            @apply py-0 px-2.5;

            .p-dropdown-filter-container {
                @apply w-full h-[3.1rem];

                input {
                    @apply m-0 h-full w-full rtl;
                }

                svg {
                    @apply hidden;
                }
            }
        }

        .p-dropdown-items-wrapper {
            @apply h-[19rem] mt-3 ml-3;

            .p-dropdown-item-group {
                @apply text-[#47B556] text-xs font-medium font-vazir p-2.5;
            }

            .p-dropdown-item {
                @apply h-[2.4rem] px-2.5 text-[#333333] text-base font-medium font-vazir;
            }

            &::-webkit-scrollbar-thumb {
                @apply bg-[#47B556];
            }

            &::-webkit-scrollbar {
                @apply w-1;
            }
        }
    }
}
</style>
