web-humas-fe/components/form/settings/profile.tsx

"use client";
import { FormEvent, Fragment, useEffect, useRef, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { Input, Textarea } from "@nextui-org/input";
import { Button } from "@nextui-org/button";
import { Radio, RadioGroup } from "@nextui-org/react";

const formSchema = z.object({
  fullname: z.string().min(1, {
    message: "Harus diisi",
  }),
  username: z.string().min(1, {
    message: "Harus diisi",
  }),
  email: z
    .string()
    .email({
      message: "Email tidak valid",
    })
    .min(2, {
      message: "Harus diisi",
    }),
  nrp: z.string().min(1, {
    message: "Harus diisi",
  }),
  gender: z.string().min(1, {
    message: "Harus diisi",
  }),
  phoneNumber: z.string().min(1, {
    message: "Harus diisi",
  }),
});

export default function ProfileForm() {
  const MySwal = withReactContent(Swal);

  const formOptions = {
    resolver: zodResolver(formSchema),
  };
  type UserSettingSchema = z.infer<typeof formSchema>;
  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
    setValue,
    getValues,
    watch,
    setError,
    clearErrors,
  } = useForm<UserSettingSchema>(formOptions);

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    console.log("values");
  };

  return (
    <form className="flex flex-col gap-3 " onSubmit={handleSubmit(onSubmit)}>
      <div className="flex flex-col gap-1">
        <p className="text-sm">Nama Lengkap</p>
        <Controller
          control={control}
          name="fullname"
          render={({ field: { onChange, value } }) => (
            <Input
              type="text"
              id="fullname"
              placeholder=""
              label=""
              value={value}
              onChange={onChange}
              labelPlacement="outside"
              className="w-full "
              classNames={{
                inputWrapper: [
                  "border-1 rounded-lg",
                  "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                ],
              }}
              variant="bordered"
            />
          )}
        />
        {errors?.fullname && (
          <p className="text-red-400 text-sm mb-3">
            {errors.fullname?.message}
          </p>
        )}
      </div>
      <div className="flex flex-col gap-1">
        <p className="text-sm">Username</p>
        <Controller
          control={control}
          name="username"
          render={({ field: { onChange, value } }) => (
            <Input
              type="text"
              id="username"
              placeholder=""
              label=""
              value={value}
              onChange={onChange}
              labelPlacement="outside"
              className="w-full "
              classNames={{
                inputWrapper: [
                  "border-1 rounded-lg",
                  "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                ],
              }}
              variant="bordered"
            />
          )}
        />
        {errors?.username && (
          <p className="text-red-400 text-sm mb-3">
            {errors.username?.message}
          </p>
        )}
      </div>

      <div className="flex flex-col gap-1">
        <p className="text-sm">Email</p>
        <Controller
          control={control}
          name="email"
          render={({ field: { onChange, value } }) => (
            <Input
              type="email"
              id="email"
              placeholder=""
              label=""
              value={value}
              onChange={onChange}
              labelPlacement="outside"
              className="w-full "
              classNames={{
                inputWrapper: [
                  "border-1 rounded-lg",
                  "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                ],
              }}
              variant="bordered"
            />
          )}
        />
        {errors?.email && (
          <p className="text-red-400 text-sm mb-3">{errors.email?.message}</p>
        )}
      </div>

      <div className="flex flex-col gap-1">
        <p className="text-sm">NRP</p>
        <Controller
          control={control}
          name="nrp"
          render={({ field: { onChange, value } }) => (
            <Input
              type="number"
              id="nrp"
              placeholder=""
              label=""
              value={value}
              onChange={onChange}
              labelPlacement="outside"
              className="w-full "
              classNames={{
                inputWrapper: [
                  "border-1 rounded-lg",
                  "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                ],
              }}
              variant="bordered"
            />
          )}
        />
        {errors?.nrp && (
          <p className="text-red-400 text-sm mb-3">{errors.nrp?.message}</p>
        )}
      </div>

      <div className="flex flex-col gap-1">
        <p className="text-sm">Gender</p>
        <Controller
          control={control}
          name="gender"
          render={({ field: { onChange, value } }) => (
            <RadioGroup
              label=""
              value={value}
              onValueChange={onChange}
              orientation="horizontal"
            >
              <Radio value="male">Laki-laki</Radio>
              <Radio value="female">Perempuan</Radio>
            </RadioGroup>
          )}
        />
        {errors?.gender && (
          <p className="text-red-400 text-sm mb-3">{errors.gender?.message}</p>
        )}
      </div>
      <Button color="primary" type="submit">
        Simpan
      </Button>
    </form>
  );
}