<template>
    <section class="container w-full">
        <Stepper>
            <StepperPanel :header="$t('information')">
                <template #content="{ nextCallback }">
                    <FirstStep @close="dialog.close()" @next="nextCallback" />
                </template>
            </StepperPanel>
            <StepperPanel :header="$t('details')">
                <template #content="{ nextCallback, prevCallback }">
                    <SecondStep @prev="prevCallback" @next="nextCallback" />
                </template>
            </StepperPanel>
            <StepperPanel :header="$t('images')">
                <template #content="{ prevCallback }">
                    <ThirdStep @prev="prevCallback" @save="save()" />
                </template>
            </StepperPanel>
        </Stepper>
    </section>
</template>

<script setup>
import { useUploaderStore } from '@/stores/uploader';
import FirstStep from './ProductFormSteps/FirstStep.vue';
import SecondStep from './ProductFormSteps/SecondStep.vue';
import ThirdStep from './ProductFormSteps/ThirdStep.vue';

import { inject, provide, reactive, ref } from 'vue';
import { useProductsStore } from '@/stores/products';

const dialog = inject('dialogRef')
const { toast, t } = inject('service')
const { product } = dialog.value.data

const form = reactive(Object.assign({}, product || {}))

const errors = reactive({})

const saving = ref(false)

provide('data', { form, errors, saving })

const store = useProductsStore()

const uploader = useUploaderStore()

const save = async () => {
    saving.value = true


    //Upload File
    if (typeof form.coverImage === 'object') {
        const { status, data } = await uploader.single(form.coverImage)

        if (status === 201)
            form.coverImage = data.url
        else
            return toast.add({
                life: 2000, severity: 'error', summary: t('error'), detail: data.msg
            })
    }

    //upload images
    const files = form.images.filter((image) => typeof image === 'object')
    if (files.length > 0) {
        const { status, data } = await uploader.bulk(files)

        if (status === 201)
            form.images = form.images.map((image) => {
                if (typeof image === 'object')
                    return data.urls.shift();
                return image;
            })
        else
            return toast.add({
                life: 2000, severity: 'error', summary: t('error'), detail: data.msg
            })
    }

    //Create or Update
    const { status, data } =
        !!product ? await store.update(product._id, form) : await store.store(form)

    saving.value = false

    if (status === 200 || status === 201) {
        toast.add({
            life: 2000,
            severity: 'success',
            summary: t('successful'),
            detail: t(!!category ? 'updateSuccessfully' : 'storeSuccessfully')
        })
        dialog.value.close()
    } else if (status === 422)
        Object.assign(errors, data)
    else
        toast.add({
            severity: 'error', life: 2000, detail: data.msg, summary: t('error')
        })
}
</script>

<style lang="scss" scoped></style>