<script setup lang="ts">
import { router } from '@inertiajs/vue3';
import { Save } from '@lucide/vue';
import { ref } from 'vue';
import { toast } from 'vue-sonner';
import ImageUploadField from '@/components/form/image-upload-field/ImageUploadField.vue';
import MultipleImageUploadField from '@/components/form/image-upload-field/MultipleImageUploadField.vue';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { createMediaUploadState } from '@/types/media';
import type { HomepageSettingsData } from '@/types/setting';
import type { MediaUploadState } from '@/types/media';

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

const heroImage = ref<File | null>(null);
const aboutImage = ref<File | null>(null);
const galleryState = ref<MediaUploadState>(
    createMediaUploadState(props.data.gallery_images),
);
const isSubmitting = ref(false);

function submit() {
    isSubmitting.value = true;

    const formData = new FormData();

    if (heroImage.value) {
        formData.append('hero_image', heroImage.value);
    }

    if (aboutImage.value) {
        formData.append('about_image', aboutImage.value);
    }

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

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

    router.put('/admin/system/setting/homepage', formData, {
        preserveScroll: true,
        onSuccess: () => {
            toast.success('Pengaturan homepage berhasil disimpan.');
            heroImage.value = null;
            aboutImage.value = null;
        },
        onError: () => {
            toast.error('Gagal menyimpan pengaturan homepage.');
        },
        onFinish: () => {
            isSubmitting.value = false;
        },
    });
}
</script>

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

            <!-- Hero Image -->
            <Card>
                <CardContent>
                    <ImageUploadField
                        id="hero_image"
                        label="Foto Hero"
                        description="Foto utama yang ditampilkan di bagian hero homepage."
                        :current-url="props.data.hero_image_url"
                        v-model="heroImage"
                        preview-class="aspect-[3/4] max-w-xs"
                    />
                </CardContent>
            </Card>

            <!-- Gallery / Lookbook -->
            <Card>
                <CardContent>
                    <MultipleImageUploadField
                        id="gallery_images"
                        label="Koleksi Lookbook"
                        description="Foto-foto yang ditampilkan di galeri lookbook."
                        :max-files="10"
                        v-model="galleryState"
                    />
                </CardContent>
            </Card>

            <!-- About Image -->
            <Card>
                <CardContent>
                    <ImageUploadField
                        id="about_image"
                        label="Foto Tentang Kami"
                        description="Foto yang ditampilkan di bagian tentang kami."
                        :current-url="props.data.about_image_url"
                        v-model="aboutImage"
                        preview-class="aspect-video max-w-md"
                    />
                </CardContent>
            </Card>

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