<script setup lang="ts">
import { router } from '@inertiajs/vue3';
import { Save } from '@lucide/vue';
import { ref } from 'vue';
import { toast } from 'vue-sonner';
import MediaDropzone from '@/components/media/MediaDropzone.vue';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { update } from '@/routes/admin/system/settings/homepage';
import { createMediaUploadState } from '@/types/media';
import type { MediaUploadState } from '@/types/media';
import type { HomepageSettingsData } from '@/types/setting';

const props = defineProps<{
    data: HomepageSettingsData;
}>();

const heroImage = ref<MediaUploadState>(
    createMediaUploadState(
        props.data.hero_image_url
            ? [{ id: 1, url: props.data.hero_image_url, thumb_url: props.data.hero_image_url }]
            : [],
    ),
);
const aboutImage = ref<MediaUploadState>(
    createMediaUploadState(
        props.data.about_image_url
            ? [{ id: 2, url: props.data.about_image_url, thumb_url: props.data.about_image_url }]
            : [],
    ),
);
const galleryState = ref<MediaUploadState>(
    createMediaUploadState(props.data.gallery_images),
);
const isSubmitting = ref(false);

function submit() {
    isSubmitting.value = true;

    const formData = new FormData();

    heroImage.value.newFiles.forEach((file) => {
        formData.append('hero_image', file);
    });

    aboutImage.value.newFiles.forEach((file) => {
        formData.append('about_image', file);
    });

    galleryState.value.newFiles.forEach((file) => {
        formData.append('gallery_images[]', file);
    });

    galleryState.value.removeIds.forEach((id) => {
        formData.append('gallery_images_remove[]', String(id));
    });

    router.put(update.url(), formData, {
        preserveScroll: true,
        onSuccess: () => {
            heroImage.value = createMediaUploadState(
                props.data.hero_image_url
                    ? [{ id: 1, url: props.data.hero_image_url, thumb_url: props.data.hero_image_url }]
                    : [],
            );
            aboutImage.value = createMediaUploadState(
                props.data.about_image_url
                    ? [{ id: 2, url: props.data.about_image_url, thumb_url: props.data.about_image_url }]
                    : [],
            );
            galleryState.value = createMediaUploadState(props.data.gallery_images);
        },
        onError: (errors: any) => {
            if (errors.system) {
                toast.error(errors.system);
            }
        },
        onFinish: () => {
            isSubmitting.value = false;
        },
    });
}
</script>

<template>
    <form @submit.prevent="submit">
        <div class="grid gap-4">

            <Card>
                <CardContent>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <MediaDropzone id="hero_image" label="Foto Hero" :max-files="1" v-model="heroImage" />

                        <MediaDropzone id="about_image" label="Foto Tentang Kami" :max-files="1" v-model="aboutImage" />

                        <div class="sm:col-span-2">
                            <MediaDropzone id="gallery_images" label="Koleksi Lookbook" :max-files="10"
                                v-model="galleryState" />
                        </div>
                    </div>
                </CardContent>
            </Card>

            <div class="flex justify-end">
                <Button type="submit" :disabled="isSubmitting">
                    <Save class="size-4" />
                    {{ isSubmitting ? 'Menyimpan...' : 'Simpan' }}
                </Button>
            </div>
        </div>
    </form>
</template>
