import Layout from '@/components/Layout';
import PageHeader from '@/components/PageHeader';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Field, FieldDescription } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useForm } from '@inertiajs/react';
import React from 'react';

interface UserData {
    name: string;
    email: string;
    password: any;
}
interface PageProps {
    user: UserData;
}

interface FormData {
    name: string;
    email: string;
    password?: any;
}

export default function profile({ user }: PageProps) {
    const { data, setData, processing, post, errors, reset } = useForm<FormData>({
        name: user?.name || '',
        email: user.email || '',
        password: '',
    });
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        post(route('profile.update'), {
            preserveScroll: true,
            onSuccess: () => {
                reset('password');
            },
        });
    };
    return (
        <Layout title="My profile">
            <PageHeader
                title="Update Profile"
                subtitle="Manage and update your personal profile information."
            />

            <Card className="w-full md:w-200">
                <CardContent>
                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <Field>
                            <Label>Name*</Label>
                            <Input
                                value={data.name}
                                onChange={(e) =>
                                    setData('name', e.target.value)
                                }
                            />
                            {errors.name && (
                                <FieldDescription className="text-destructive">
                                    {errors.name}
                                </FieldDescription>
                            )}
                        </Field>
                        <Field>
                            <Label>Email*</Label>
                            <Input
                                type="email"
                                value={data.email}
                                onChange={(e) =>
                                    setData('email', e.target.value)
                                }
                            />
                            {errors.email && (
                                <FieldDescription className="text-destructive">
                                    {errors.email}
                                </FieldDescription>
                            )}
                        </Field>
                        <Field className="col-span-1 md:col-span-2">
                            <Label>Password</Label>
                            <Input
                                type="text"
                                value={data.password}
                                onChange={(e) =>
                                    setData('password', e.target.value)
                                }
                            />
                            {errors.password && (
                                <FieldDescription className="text-destructive">
                                    {errors.password}
                                </FieldDescription>
                            )}
                        </Field>
                        <Button
                            onClick={handleSubmit}
                            disabled={processing}
                            className="w-fit"
                        >
                            Update
                        </Button>
                    </div>
                </CardContent>
            </Card>
        </Layout>
    );
}