mediahub-fe/app/[locale]/(public)/profile/page.tsx

"use client";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { control } from "leaflet";
import React, { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import Swal from "sweetalert2";
import { getBlog, postBlog } from "@/service/blog/blog";
import { id } from "date-fns/locale";
import { useRouter } from "next/navigation";
import { getInfoProfile, saveUser } from "@/service/auth";
import withReactContent from "sweetalert2-react-content";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Link } from "@/components/navigation";
import { useTranslations } from "next-intl";

const profileSchema = z.object({
  username: z.string().optional(),
  fullname: z.string().optional(),
  memberIdentity: z.string().optional(),
  email: z.string().email("Format email tidak valid").optional(),
  address: z.string().optional(),
  phoneNumber: z.string().optional(),
});

type Detail = {
  id: number;
  userId: any;
  firstName: string;
  username: string;
  fullname: string;
  memberIdentity: any;
  email: string;
  address: string;
  phoneNumber: any;
  message: string;
  userKeycloakId: string;
};

const UbahProfile: React.FC = () => {
  const MySwal = withReactContent(Swal);
  const [detail, setDetail] = useState<Detail>();
  const [refresh, setRefresh] = useState(false);
  const t = useTranslations("LandingPage");
  const router = useRouter();

  type ProfileSchema = z.infer<typeof profileSchema>;
  const {
    control,
    handleSubmit,
    setValue,
    reset,
    formState: { errors },
  } = useForm<ProfileSchema>({
    resolver: zodResolver(profileSchema),
  });

  // useEffect(() => {
  //   async function initState() {
  //     const response = await getInfoProfile();
  //     const details = response?.data?.data;

  //     setDetail(details);
  //     // console.log("data", details);
  //   }

  //   initState();
  // }, []);
  useEffect(() => {
    async function initState() {
      const response = await getInfoProfile();
      const details = response?.data?.data;

      setDetail(details);

      reset({
        username: details?.username,
        fullname: details?.fullname,
        memberIdentity: details?.memberIdentity,
        email: details?.email,
        address: details?.address,
        phoneNumber: details?.phoneNumber,
      });
    }

    initState();
  }, []);

  const save = async (data: ProfileSchema) => {
    // const requestData = {
    //   ...data,
    //   // userId: detail?.userKeycloakId,
    //   firstName: detail?.fullname,
    //   username: detail?.username,
    //   memberIdentity: detail?.memberIdentity,
    //   email: detail?.email,
    //   address: detail?.address,
    //   phoneNumber: detail?.phoneNumber,
    //   // message: data.title,
    // };
    const requestData = {
      id: detail?.id,
      userKeycloakId: detail?.userKeycloakId, // 🔥 tambahin ini
      username: data.username,
      fullname: data.fullname,
      email: data.email,
      memberIdentity: data.memberIdentity,
      address: data.address,
      phoneNumber: data.phoneNumber,
    };
    console.log("FORM DATA:", data);
    console.log("REQUEST DATA:", requestData);
    const response = await saveUser(requestData);
    MySwal.fire({
      title: "Sukses",
      text: "Data berhasil disimpan.",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then(() => {
      router.refresh();
    });
  };

  const onSubmit = (data: ProfileSchema) => {
    MySwal.fire({
      title: "Simpan Data",
      text: "Apakah Anda yakin ingin menyimpan data ini?",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#d33",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Simpan",
    }).then((result) => {
      if (result.isConfirmed) {
        save(data);
      }
    });
  };
  return (
    <div className="px-4 lg:px-14 py-8">
      <div className="text-center mb-8">
        <div className="w-20 h-20 mx-auto rounded-full bg-red-700 flex items-center justify-center">
          <span className="text-white text-3xl font-bold">👤</span>
        </div>
        <h1 className="text-2xl font-bold mt-4">
          {t("changeProfile", { defaultValue: "Change Profile" })}
        </h1>
      </div>
      <div className="flex justify-center gap-4 mb-8">
        <Link href={"/profile"}>
          <button className="bg-red-700 text-white px-4 py-2 rounded">
            {t("userProfile", { defaultValue: "User Profile" })}
          </button>
        </Link>
        <Link href={"/profile/change-profile"}>
          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">
            {t("changePhoto", { defaultValue: "Change Photo" })}
          </button>
        </Link>
        <Link href={"/profile/change-password"}>
          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">
            {t("changePass", { defaultValue: "Change Pass" })}
          </button>
        </Link>
      </div>

      <div className="max-w-3xl mx-auto bg-white shadow-sm p-4 rounded">
        <p className="mb-6 text-gray-600">
          {t("pleaseChange", { defaultValue: "Please Change" })}
        </p>
        <form onSubmit={handleSubmit(onSubmit)}>
          {detail !== undefined ? (
            <div>
              <div className="mb-4">
                <Label>
                  Username<span className="text-red-500">*</span>
                </Label>
                {/* <Controller
                  control={control}
                  name="username"
                  render={({ field }) => (
                    <Input
                      size="md"
                      type="text"
                      defaultValue={detail?.username}
                      onChange={field.onChange}
                      placeholder="Enter Title"
                    />
                  )}
                /> */}
                <Controller
                  control={control}
                  name="username"
                  render={({ field }) => <Input {...field} type="text" readOnly  />}
                />
                {errors.username?.message && (
                  <p className="text-red-400 text-sm">
                    {errors.username.message}
                  </p>
                )}
              </div>
              {/* <div className="mb-4">
                <Label>
                  {t("fullName", { defaultValue: "Full Name" })}
                  <span className="text-red-500">*</span>
                </Label> */}
                {/* <Controller
                  control={control}
                  name="fullname"
                  render={({ field }) => (
                    <Input
                      size="md"
                      type="text"
                      defaultValue={detail?.fullname}
                      onChange={field.onChange}
                      placeholder="Enter Title"
                    />
                  )}
                /> */}
                {/* <Controller
                  control={control}
                  name="fullname"
                  render={({ field }) => <Input {...field} type="text" />}
                />
                {errors.fullname?.message && (
                  <p className="text-red-400 text-sm">
                    {errors.fullname.message}
                  </p>
                )}
              </div> */}
              <div className="mb-4">
                <Label>
                  {t("identityNumber", { defaultValue: "Identity Number" })}
                  <span className="text-red-500">*</span>
                </Label>
                {/* <Controller
                  control={control}
                  name="memberIdentity"
                  render={({ field }) => (
                    <Input
                      size="md"
                      type="text"
                      defaultValue={detail?.memberIdentity}
                      onChange={field.onChange}
                      placeholder="Enter Title"
                    />
                  )}
                /> */}
                <Controller
                  control={control}
                  name="memberIdentity"
                  render={({ field }) => <Input {...field} type="text" />}
                />
                {errors.memberIdentity?.message && (
                  <p className="text-red-400 text-sm">
                    {errors.memberIdentity.message}
                  </p>
                )}
              </div>
              <div className="mb-4">
                <Label>
                  Email<span className="text-red-500">*</span>
                </Label>
                {/* <Controller
                  control={control}
                  name="email"
                  render={({ field }) => (
                    <Input
                      size="md"
                      type="text"
                      defaultValue={detail?.email}
                      onChange={field.onChange}
                      placeholder="Enter Title"
                    />
                  )}
                /> */}
                <Controller
                  control={control}
                  name="email"
                  render={({ field }) => <Input {...field} type="text" />}
                />
                {errors.email?.message && (
                  <p className="text-red-400 text-sm">{errors.email.message}</p>
                )}
              </div>
              <div className="mb-4">
                <Label>
                  {t("number", { defaultValue: "Number" })}
                  <span className="text-red-500">*</span>
                </Label>
                {/* <Controller
                  control={control}
                  name="phoneNumber"
                  render={({ field }) => (
                    <Input
                      size="md"
                      type="number"
                      defaultValue={detail?.phoneNumber}
                      onChange={field.onChange}
                      placeholder="Enter Title"
                    />
                  )}
                /> */}
                <Controller
                  control={control}
                  name="phoneNumber"
                  render={({ field }) => <Input {...field} type="text" />}
                />
                {errors.phoneNumber?.message && (
                  <p className="text-red-400 text-sm">
                    {errors.phoneNumber.message}
                  </p>
                )}
              </div>
              <div className="mb-4">
                <Label>
                  {t("address", { defaultValue: "Address" })}
                  <span className="text-red-500">*</span>
                </Label>
                {/* <Controller
                  control={control}
                  name="address"
                  render={({ field }) => (
                    <Textarea
                      defaultValue={detail?.address}
                      onChange={field.onChange}
                      placeholder="Enter Title"
                    />
                  )}
                /> */}
                <Controller
                  control={control}
                  name="address"
                  render={({ field }) => <Textarea {...field} />}
                />
                {errors.address?.message && (
                  <p className="text-red-400 text-sm">
                    {errors.address.message}
                  </p>
                )}
              </div>
              <div className="text-right">
                <div className="mt-4">
                  <button
                    type="submit"
                    className="bg-red-700 text-white px-6 py-2 rounded hover:bg-red-800 focus:outline-none focus:ring focus:ring-red-300"
                  >
                    {t("save", { defaultValue: "Save" })}
                  </button>
                </div>
              </div>
            </div>
          ) : (
            ""
          )}
        </form>
      </div>
    </div>
  );
};

export default UbahProfile;