import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AppLayout from '@/layouts/app-layout';
import { Head, useForm } from '@inertiajs/react';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
import 'filepond/dist/filepond.min.css';
import { useEffect, useState } from 'react';
import { FilePond, registerPlugin } from 'react-filepond';
import { toast } from 'sonner';

registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

export default function CarouselAdd() {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const [file, setFile] = useState<any | null>(null);

    const { data, setData, post, processing, errors, wasSuccessful } = useForm({
        alt: '',
        image_url: null as File | null,
    });

    useEffect(() => {
        if (file) {
            setData('image_url', file.file);
        }
    }, [file, setData]);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        post('/carousel', {
            forceFormData: true,
        });

        if (wasSuccessful) {
            toast.success('Slider image successfully uploaded');
        }
    };

    return (
        <AppLayout>
            <Head title="Add Carousel" />
            <section className="flex flex-col gap-8 px-8 py-8">
                <h1 className="text-lg font-semibold tracking-tight">
                    Add Slider Image
                </h1>
                <form
                    onSubmit={handleSubmit}
                    method="POST"
                    encType="multipart/formdata"
                >
                    <div className="flex flex-col gap-4">
                        <Label htmlFor="title">Title</Label>
                        <Input
                            type="text"
                            id="title"
                            value={data.alt}
                            onChange={(e) => setData('alt', e.target.value)}
                            className="rounded border p-2"
                        />
                        {errors.alt && (
                            <span className="text-red-600">{errors.alt}</span>
                        )}
                    </div>

                    <div className="mt-4">
                        <Label>Image</Label>
                        <FilePond
                            files={file ? [file] : []}
                            onupdatefiles={(fileItems) => {
                                setFile(fileItems[0] || null);
                            }}
                            allowMultiple={false}
                            maxFiles={1}
                            name="image_url"
                            instantUpload={false}
                            storeAsFile={true}
                            labelIdle='Drag & Drop your image or <span class="filepond--label-action">Browse</span>'
                        />
                        {errors.image_url && (
                            <span className="text-red-600">
                                {errors.image_url}
                            </span>
                        )}
                    </div>

                    <Button
                        type="submit"
                        disabled={processing}
                        className="cursor-pointer"
                    >
                        {processing ? 'Uploading...' : 'Submit'}
                    </Button>
                </form>
            </section>
        </AppLayout>
    );
}
