import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import AppLayout from '@/layouts/app-layout';
import dashboard from '@/routes/dashboard';
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 [type, setType] = useState<string>('traditional');

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

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

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

        post(dashboard.product.add().url, {
            forceFormData: true,
        });

        if (wasSuccessful) {
            toast.success('Product added successfully');
        }
    };

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

                        <div className="flex w-full flex-col gap-4">
                            <Label htmlFor="title">Type</Label>
                            <Select
                                value={data.type}
                                onValueChange={(e) => {
                                    console.log(e);
                                    setData('type', e);
                                }}
                            >
                                <SelectTrigger>
                                    <SelectValue placeholder="Select a type" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectGroup>
                                        <SelectItem value="traditional">
                                            Traditional
                                        </SelectItem>
                                        <SelectItem value="modern">
                                            Modern
                                        </SelectItem>
                                        <SelectItem value="bespoke">
                                            Bespoke
                                        </SelectItem>
                                        <SelectItem value="abstract">
                                            Abstract
                                        </SelectItem>
                                        <SelectItem value="art">
                                            Art in carpet
                                        </SelectItem>
                                    </SelectGroup>
                                </SelectContent>
                            </Select>
                            {/* <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>

                    <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>
    );
}
