import { Head, useForm } from '@inertiajs/react';
import PublicLayout from '@/Layouts/PublicLayout';
import Card from '@/Components/UI/Card';
import Button from '@/Components/UI/Button';
import InputLabel from '@/Components/InputLabel';
import TextInput from '@/Components/TextInput';
import InputError from '@/Components/InputError';

export default function CreateThread({ category }: { category: { id: number; name: string; slug: string } }) {
    const { data, setData, post, processing, errors } = useForm({
        title: '',
        body: '',
    });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        post(route('forum.threads.store', category.slug));
    };

    return (
        <PublicLayout>
            <Head title={`New Thread in ${category.name}`} />

            <section className="mx-auto max-w-3xl px-6 pb-20 pt-16 lg:px-margin-page">
                <p className="text-label-caps text-accent-gold">{category.name}</p>
                <h1 className="text-institute-title mt-2 text-on-surface">Start a New Thread</h1>

                <Card className="mt-8">
                    <form onSubmit={submit} className="space-y-5">
                        <div>
                            <InputLabel htmlFor="title" value="Title" />
                            <TextInput
                                id="title"
                                className="mt-1 block w-full"
                                value={data.title}
                                onChange={(e) => setData('title', e.target.value)}
                            />
                            <InputError message={errors.title} className="mt-1" />
                        </div>

                        <div>
                            <InputLabel htmlFor="body" value="Message" />
                            <textarea
                                id="body"
                                className="mt-1 block w-full rounded border-outline-variant"
                                rows={8}
                                value={data.body}
                                onChange={(e) => setData('body', e.target.value)}
                            />
                            <InputError message={errors.body} className="mt-1" />
                        </div>

                        <Button type="submit" variant="primary" disabled={processing}>
                            Post Thread
                        </Button>
                    </form>
                </Card>
            </section>
        </PublicLayout>
    );
}
