import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import {
    Field,
    FieldDescription,
    FieldGroup,
    FieldLabel,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { toast, Toaster } from '@/components/ui/toast';
import { PageProps } from '@/types/type';
import { useForm, usePage } from '@inertiajs/react';
import { useEffect } from 'react';

interface FormData {
    email: string;
    password: string;
}

export default function login() {
    const { data, setData, processing, errors, post } = useForm<FormData>({
        email: '',
        password: '',
    });
    const handleLoginSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        post(route('login.post'), {
            preserveScroll: true,
        });
    };

    // show error
    const { flash } = usePage<PageProps>().props;
    useEffect(() => {
        if (flash?.error) {
            toast.add({
                type: 'error',
                description: flash.error,
                priority: 'high',
            });
        }

        if (flash?.success) {
            toast.add({
                type: 'success',
                description: flash.success,
                priority: 'high',
            });
        }
    }, [flash?.id]);
    return (
        <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
            <Toaster />
            <div className="w-full max-w-sm">
                <Card>
                    <CardHeader>
                        <CardTitle>Login to your account</CardTitle>
                        <CardDescription>
                            Enter your email below to login to your account
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <form onSubmit={handleLoginSubmit}>
                            <FieldGroup>
                                <Field>
                                    <FieldLabel htmlFor="email">
                                        Email
                                    </FieldLabel>
                                    <Input
                                        id="email"
                                        type="email"
                                        placeholder="m@example.com"
                                        value={data.email}
                                        onChange={(e) =>
                                            setData('email', e.target.value)
                                        }
                                    />
                                    {errors.email && (
                                        <FieldDescription className="text-destructive">
                                            {errors.email}
                                        </FieldDescription>
                                    )}
                                </Field>
                                <Field>
                                    <FieldLabel htmlFor="password">
                                        Password
                                    </FieldLabel>
                                    <Input
                                        id="password"
                                        type="password"
                                        value={data.password}
                                        onChange={(e) =>
                                            setData('password', e.target.value)
                                        }
                                    />
                                    {errors.password && (
                                        <FieldDescription className="text-destructive">
                                            {errors.password}
                                        </FieldDescription>
                                    )}
                                </Field>
                                <Field>
                                    <Button type="submit" disabled={processing}>
                                        {processing ? 'Processing..' : 'Login'}
                                    </Button>
                                </Field>
                            </FieldGroup>
                        </form>
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}