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 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 { registerPlugin } from 'react-filepond';
import { toast } from 'sonner';

registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

export default function FaqAdd() {
    const { data, setData, post, processing, errors, wasSuccessful } = useForm({
        question: '',
        answer: '',
    });

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

        post(dashboard.faq.addFaq().url, {
            forceFormData: true,
        });

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

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

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