import { useForm } from '@inertiajs/vue3';
import { computed, ref, watch } from 'vue';
import type { AuctionFormImage } from '@/components/online-auctions/AuctionImageUploadFields.vue';
import { usePlateGeneratorPreviewUrl } from '@/composables/usePlateGeneratorPreviewUrl';
import type { MarketplaceListingEditData, MarketplaceListingFormLookups } from '@/types/marketplaceListingForm';
import { adminDashboardBreadcrumb } from '@/utils/adminBreadcrumbs';
import { persistedUploadIds, pendingUploadFiles } from '@/utils/auctionFormUploads';
import { isPlatePreviewReady } from '@/utils/platePreview';

export function useMarketplaceListingEditForm(props: {
    listing: MarketplaceListingEditData;
    updateUrl: string;
    lookups: MarketplaceListingFormLookups;
    platePreviewUrl: string;
}) {
    const breadcrumbData = [
        adminDashboardBreadcrumb(),
        { name: 'Listings', href: route('admin.listings.index') },
        { name: 'Edit Listing', href: '/', disabled: true },
    ];

    const listingImages = ref<AuctionFormImage[]>([...props.listing.uploads]);

    const form = useForm({
        is_featured: props.listing.is_featured,
        asking_price: props.listing.asking_price,
        price: props.listing.price,
        payment_methods: props.listing.payment_methods,
        description: props.listing.description,
        combination: props.listing.combination,
        state: props.listing.state,
        background_id: props.listing.background_id,
        characters_id: props.listing.characters_id,
        category_id: props.listing.category_id,
        vehicle_id: props.listing.vehicle_id,
        frame: props.listing.frame,
        width: props.listing.width ?? 'fixed',
        display_state: props.listing.display_state,
        display_position: props.listing.display_position ?? 'left',
        category_heading: props.listing.category_heading,
        specifications: props.listing.specifications,
        upload_ids: persistedUploadIds(listingImages.value),
    });

    const platePreviewFields = computed(() => ({
        combination: form.combination,
        state: form.state,
        background_id: form.background_id,
        characters_id: form.characters_id,
        category_id: form.category_id,
        frame: form.frame,
        display_state: form.display_state,
        display_position: form.display_position,
        width: form.width,
    }));

    const platePreviewReady = computed(() => isPlatePreviewReady(platePreviewFields.value));

    const { previewUrl: livePlatePreviewUrl, isPreviewLoading: isPlatePreviewLoading } =
        usePlateGeneratorPreviewUrl(platePreviewFields, props.platePreviewUrl, {
            initialUrl: props.listing.plate_image_url ?? null,
        });

    const plateDisplayUrl = computed(() =>
        platePreviewReady.value ? livePlatePreviewUrl.value : null,
    );

    watch(
        listingImages,
        (images) => {
            form.upload_ids = persistedUploadIds(images);
        },
        { deep: true },
    );

    function submit(): void {
        form
            .transform((data) => ({
                ...data,
                _method: 'put',
                upload_ids: persistedUploadIds(listingImages.value),
                upload_files: pendingUploadFiles(listingImages.value),
            }))
            .post(props.updateUrl, {
                forceFormData: true,
                preserveScroll: true,
            });
    }

    return {
        breadcrumbData,
        form,
        listing: props.listing,
        listingImages,
        lookups: props.lookups,
        platePreviewReady,
        isPlatePreviewLoading,
        plateDisplayUrl,
        submit,
    };
}