evyos-frontend-development/frontend/pages/users/update/form.tsx

"use client"
import { useFieldArray, useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Separator } from "@/components/ui/separator"
import { DateTimePicker } from "@/components/ui/date-time-picker"
import { useUpdateUserMutation } from "@/pages/users/update/queries"
import { userUpdateSchema, type UserUpdate } from "@/pages/users/update/schema"

const UserForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () => void, initData: UserUpdate, selectedUuid: string }) => {

    const form = useForm<UserUpdate>({
        resolver: zodResolver(userUpdateSchema),
        defaultValues: {
            expiryStarts: initData.expiryStarts,
            expiryEnds: initData.expiryEnds,
            isConfirmed: initData.isConfirmed,
            isNotificationSend: initData.isNotificationSend,
            tag: initData.tag,
            email: initData.email,
            phone: initData.phone,
            collectionTokens: initData.collectionTokens,
        },
    })

    const { control, handleSubmit } = form

    const { fields, append, remove } = useFieldArray({ control, name: "collectionTokens.tokens" })

    const mutation = useUpdateUserMutation();

    function onSubmit(values: UserUpdate) { mutation.mutate({ data: values as any || initData, uuid: selectedUuid }); setTimeout(() => refetchTable(), 400) }

    return (
        <Form {...form}>
            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4">
                {/* BASIC INFO */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Email</FormLabel>
                                <FormControl>
                                    <Input placeholder="user@example.com" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="phone"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Phone</FormLabel>
                                <FormControl>
                                    <Input placeholder="+901234567" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                {/* PASSWORD / TAG */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="tag"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Tag</FormLabel>
                                <FormControl>
                                    <Input placeholder="User tag..." {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                {/* DATES */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

                    <FormField
                        control={form.control}
                        name="expiryStarts"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Expiry Starts</FormLabel>
                                <FormControl>
                                    <DateTimePicker {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="expiryEnds"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Expiry Ends</FormLabel>
                                <FormControl>
                                    <DateTimePicker {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                {/* SWITCHES */}
                <div className="flex items-center gap-6">
                    <FormField
                        control={form.control}
                        name="isConfirmed"
                        render={({ field }) => (
                            <FormItem className="flex items-center gap-2">
                                <FormControl>
                                    <Checkbox
                                        checked={field.value}
                                        onCheckedChange={field.onChange}
                                    />
                                </FormControl>
                                <FormLabel className="mt-0!">Confirmed</FormLabel>
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="isNotificationSend"
                        render={({ field }) => (
                            <FormItem className="flex items-center gap-2">
                                <FormControl>
                                    <Checkbox
                                        checked={field.value}
                                        onCheckedChange={field.onChange}
                                    />
                                </FormControl>
                                <FormLabel className="mt-0!">Send Notification</FormLabel>
                            </FormItem>
                        )}
                    />
                </div>

                <Separator />

                {/* COLLECTION TOKENS */}
                <FormField
                    control={form.control}
                    name="collectionTokens.default"
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>Default Token</FormLabel>
                            <FormControl>
                                <Input placeholder="Default token..." {...field} />
                            </FormControl>
                        </FormItem>
                    )}
                />

                <div className="space-y-3">
                    <div className="flex justify-between items-center">
                        <FormLabel>Tokens</FormLabel>

                        <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => append({ prefix: "", token: "" })}
                        >
                            + Add Token
                        </Button>
                    </div>

                    {fields.length === 0 && (
                        <p className="text-sm text-muted-foreground">No tokens added.</p>
                    )}

                    {fields.map((fieldItem, i) => (
                        <div
                            key={fieldItem.id}
                            className="grid grid-cols-12 gap-2 items-end"
                        >
                            <div className="col-span-4">
                                <FormField
                                    control={form.control}
                                    name={`collectionTokens.tokens.${i}.prefix`}
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Prefix</FormLabel>
                                            <FormControl>
                                                <Input placeholder="prefix" {...field} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>

                            <div className="col-span-6">
                                <FormField
                                    control={form.control}
                                    name={`collectionTokens.tokens.${i}.token`}
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Token</FormLabel>
                                            <FormControl>
                                                <Input placeholder="token" {...field} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>

                            <Button
                                type="button"
                                variant="destructive"
                                size="icon"
                                className="col-span-2 h-10"
                                onClick={() => remove(i)}
                            >
                                ✕
                            </Button>
                        </div>
                    ))}
                </div>

                <Separator />

                <Button type="submit" className="w-full">
                    Update User
                </Button>
            </form>
        </Form>
    )
}

export { UserForm }