"use client"

import { User } from "@/modules/products/product"
import React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { UserSchema, UserSchemaType } from "@/lib/validations/user"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/chadcn-input"
import TranslateClient from "@/components/ui/localization/TranslateClient"

interface UserFormProps {
  user?: User
  summary?: boolean
}

const UserForm: React.FC<UserFormProps> = ({ user, summary }) => {
  const form = useForm<UserSchemaType>({
    resolver: zodResolver(UserSchema),
    defaultValues: {
      username: user ? user.User.username : "",
      nickname: user ? user.User.title : "",
      email: user ? user.User.email : "",
      phone: user ? user.User.phone : "",
    },
  })

  const onSubmit = (data: UserSchemaType) => {
    console.log(data)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="mx-auto w-full space-y-6 px-1 sm:px-4">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <TranslateClient text="name_of_institution" />
              </FormLabel>
              <FormControl>
                <Input disabled={summary} className="border-gray-100" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="nickname"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <TranslateClient text="tax_number" />
              </FormLabel>
              <FormControl>
                <Input disabled={summary} className="border-gray-100" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <TranslateClient text="email" />
              </FormLabel>
              <FormControl>
                <Input disabled={summary} className="border-gray-100" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="phone"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <TranslateClient text="phone_number" />
              </FormLabel>
              <FormControl>
                <Input disabled={summary} className="border-gray-100" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </form>
    </Form>
  )
}

export default UserForm