kontenhumas-fe/app/[locale]/(admin)/admin/management-user/edit/[id]/page.tsx

"use client";

import SiteBreadcrumb from "@/components/site-breadcrumb";
import { zodResolver } from "@hookform/resolvers/zod";
import { Check, ChevronsUpDown } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { cn, getCookiesDecrypt } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  AdministrationLevelList,
  getListCompetencies,
  getListEducation,
  getListSchools,
  getUserById,
  updateUserInternal,
} from "@/service/management-user/management-user";
import { useEffect, useState } from "react";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Link, useRouter } from "@/i18n/routing";
import dynamic from "next/dynamic";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { close, error, loading } from "@/config/swal";
import { useParams } from "next/navigation";
import { getUserLevels } from "@/service/approval-workflows";

const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
  ssr: false,
});

const sns = [
  {
    key: 1,
    id: "comment",
    typeId: 1,
    name: "Komentar Konten",
  },
  {
    key: 2,
    id: "fb",
    typeId: 2,
    name: "Facebook",
  },
  {
    key: 3,
    id: "ig",
    typeId: 3,
    name: "Instagram",
  },
  {
    key: 4,
    id: "twt",
    typeId: 4,
    name: "Twitter",
  },
  {
    key: 5,
    id: "yt",
    typeId: 5,
    name: "Youtube",
  },
  {
    key: 6,
    id: "emergency",
    typeId: 6,
    name: "Emergency Issue",
  },
  {
    key: 7,
    id: "email",
    typeId: 7,
    name: "Email",
  },
  {
    key: 8,
    id: "inbox",
    typeId: 8,
    name: "Pesan Masuk",
  },
  {
    key: 9,
    id: "whatsapp",
    typeId: 9,
    name: "Whatssapp",
  },
  {
    key: 10,
    id: "tiktok",
    typeId: 10,
    name: "Tiktok",
  },
];

interface RoleData {
  id: number;
  label: string;
  name: string;
  value: string;
  levelNumber: number;
}

const FormSchema = z.object({
  // level: z.string({
  //   required_error: "Required",
  // }),
  fullname: z.string({
    required_error: "Required",
  }),
  username: z.string({
    required_error: "Required",
  }),
  // role: z.string({
  //   required_error: "Required",
  // }),
  // nrp: z.string({
  //   required_error: "Required",
  // }),
  address: z.string({
    required_error: "Required",
  }),
  email: z.string({
    required_error: "Required",
  }),
  phoneNumber: z.string({
    required_error: "Required",
  }),
  password: z.string({
    required_error: "Required",
  }),
  confirmPassword: z.string({
    required_error: "Required",
  }),
  isValidPassword: z.boolean().refine((val) => val === true, {
    message: "Check Password",
  }),
  sns: z.array(z.string()).optional(),
  education: z.string().optional(),
  school: z.string().optional(),
  competency: z.string().optional(),
});

export default function EditUserForm() {
  const router = useRouter();
  const params = useParams();
  const id = params?.id;
  const MySwal = withReactContent(Swal);
  const levelName = getCookiesDecrypt("ulnae");
  const [roleList, setRoleList] = useState<RoleData[]>([]);
  const [userEducations, setUserEducations] = useState<any>();
  const [userSchools, setUserSchools] = useState<any>();
  const [userCompetencies, setUserCompetencies] = useState<any>();

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      password: "",
      confirmPassword: "",
      sns: [],
      education: "1",
      school: "4",
      competency: "2",
    },
  });

  const passwordVal = form.watch("password");
  const confPasswordVal = form.watch("confirmPassword");

  useEffect(() => {
    getDataAdditional();
    initData();
  }, []);

  const initData = async () => {
    loading();
    const levels = await initFetch();
    console.log("LEVEL READY:", levels);
    const response = await getUserById(String(id));
    close();

    const list = response?.data?.data;
    const user = list?.find((item: any) => item.id === Number(id));

    if (!user) {
      error("User tidak ditemukan");
      return;
    }

    console.log("RESET WITH USER:", user);

    // 3️⃣ Reset SETELAH level ADA
    form.reset({
      fullname: user.fullname ?? "",
      username: user.username ?? "",
      email: user.email ?? "",
      address: user.address ?? "",
      phoneNumber: user.phoneNumber ?? "",
      // nrp: user.identityNumber ?? "",
      // level: String(user.userLevelId), 
      // role: String(user.userRoleId ?? ""),
      password: "",
      confirmPassword: "",
      sns: [],
      education: "",
      school: "",
      competency: "",
    });
  };

  // const initData = async () => {
  //   console.log("PARAM ID:", id);

  //   loading();
  //   const response = await getUserById(String(id));
  //   const res = response?.data?.data;
  //   close();
  //   console.log("FULL RESPONSE:", response);
  //   console.log("RESPONSE.DATA:", response?.data);
  //   console.log("RESPONSE.DATA.DATA:", response?.data?.data);
  //   if (Number(res.roleId) > 4) {
  //     form.setValue("fullname", res?.fullname);
  //     form.setValue("username", res?.username);
  //     form.setValue("phoneNumber", res?.phoneNumber);
  //     form.setValue("nrp", res?.memberIdentity);
  //     form.setValue("address", res?.address);
  //     form.setValue("email", res?.email);
  //     form.setValue("role", res?.role?.code);
  //     form.setValue("level", String(res?.userLevelId));
  //   } else {
  //     initFetch();
  //     form.setValue("fullname", res?.fullname);
  //     form.setValue("username", res?.username);
  //     form.setValue("phoneNumber", res?.phoneNumber);
  //     form.setValue("nrp", res?.memberIdentity);
  //     form.setValue("address", res?.address);
  //     form.setValue("email", res?.email);
  //     form.setValue("role", res?.role?.code);
  //     form.setValue("level", String(res?.userLevelId));
  //   }
  // };

  const initFetch = async () => {
    const response = await getUserLevels();
    const res = response?.data?.data ?? [];

    const levelsArr: RoleData[] = res.map((levels: any) => ({
      id: levels.id,
      label: levels.aliasName ?? levels.name,
      name: levels.name,
      value: String(levels.id),
      levelNumber: levels.levelNumber,
    }));

    setRoleList(levelsArr);
    return levelsArr;
  };

  async function getDataAdditional() {
    const resEducations = await getListEducation();
    setUserEducations(resEducations?.data?.data);
    const resSchools = await getListSchools();
    setUserSchools(resSchools?.data?.data);
    const resCompetencies = await getListCompetencies();
    setUserCompetencies(resCompetencies?.data?.data);
  }

  const rawRoleId = getCookiesDecrypt("urie");
  const userRoleId = rawRoleId ? Number(rawRoleId) : undefined;

  if (!userRoleId || Number.isNaN(userRoleId)) {
    error("Role user tidak valid, silakan login ulang");
    return;
  }

  async function save(data: z.infer<typeof FormSchema>) {
    const req = {
      fullname: data.fullname,
      username: data.username,
      email: data.email,
      address: data.address,
      phoneNumber: data.phoneNumber,
      // userLevelId: Number(data.level),
      // userRoleId: userRoleId,
    };

    // let req: any = {
    //   id: Number(id),
    //   firstName: data.fullname,
    //   username: data.username,
    //   roleId: data.role,
    //   userLevelId: Number(data.level),
    //   memberIdentity: data.nrp,
    //   address: data.address,
    //   email: data.email,
    //   password: data.password,
    //   passwordConf: data.confirmPassword,
    //   isDefault: false,
    //   isAdmin: true,
    // };

    console.log("USER ROLE ID FROM COOKIE:", rawRoleId, userRoleId);
    console.log("REQUEST UPDATE:", req);

    loading();
    const response = await updateUserInternal(Number(id), req);

    if (response?.error) {
      error(response.message);
      return false;
    }

    close();
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Oke",
    }).then((result) => {
      if (result.isConfirmed) {
        router.push("/admin/management-user");
      }
    });
    return false;
  }

  async function onSubmit(data: z.infer<typeof FormSchema>) {
    MySwal.fire({
      title: "Simpan Data?",
      text: "",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#d33",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Simpan",
    }).then((result) => {
      if (result.isConfirmed) {
        save(data);
      }
    });
  }

  return (
    <div>
      <SiteBreadcrumb />
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-6 bg-white p-10 w-full"
        >
          <p className="text-xl">Data User</p>
          {/* <FormField
            control={form.control}
            name="level"
            render={({ field }) => (
              <FormItem className="flex flex-col">
                <FormLabel>Pilih Level</FormLabel>
                <Popover>
                  <PopoverTrigger asChild>
                    <FormControl>
                      <Button
                        variant="outline"
                        role="combobox"
                        className={cn(
                          "w-[400px] justify-between",
                          !field.value && "text-muted-foreground",
                        )}
                      >
                        {field.value
                          ? roleList.find((role) => role.value === field.value)
                              ?.label
                          : "Pilih level"}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </FormControl>
                  </PopoverTrigger>
                  <PopoverContent className="w-[400px] p-0">
                    <Command>
                      <CommandInput />
                      <CommandList>
                        <CommandEmpty>No role found.</CommandEmpty>
                        <CommandGroup>
                          {roleList.map((role) => (
                            <CommandItem
                              value={role.label}
                              key={role.value}
                              onSelect={() => {
                                form.setValue("level", role.value);
                              }}
                            >
                              {role.label}
                              <Check
                                className={cn(
                                  "ml-auto",
                                  role.value === field.value
                                    ? "opacity-100"
                                    : "opacity-0",
                                )}
                              />
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
                <FormMessage />
              </FormItem>
            )}
          /> */}
          <FormField
            control={form.control}
            name="fullname"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nama Lengkap</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Masukkan nama lengkap"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Masukkan username"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />

          {/* <FormField
            control={form.control}
            name="role"
            render={({ field }) => (
              <FormItem className="space-y-3">
                <FormLabel>Role</FormLabel>
                <FormControl>
                  <RadioGroup
                    onValueChange={field.onChange}
                    value={field.value}
                    className="flex flex-wrap gap-3 w-1/2"
                  >
                    {roles.map((role) => (
                      <FormItem
                        key={role.id}
                        className="flex items-center space-x-3 space-y-0"
                      >
                        <FormControl>
                          <RadioGroupItem value={role.id} />
                        </FormControl>
                        <FormLabel className="font-normal">
                          {role.name}
                        </FormLabel>
                      </FormItem>
                    ))}
                  </RadioGroup>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          /> */}
          {/* {selectedRole === "OPT-ID" && (
            <FormField
              control={form.control}
              name="sns"
              render={() => (
                <FormItem>
                  <div className="mb-4">
                    <FormLabel>Social Media Yang Ditangani</FormLabel>
                  </div>
                  <div className="grid grid-cols-5 gap-2 w-1/2">
                    {sns.map((item) => (
                      <FormField
                        key={item.id}
                        control={form.control}
                        name="sns"
                        render={({ field }) => {
                          return (
                            <FormItem
                              key={item.typeId}
                              className="flex flex-row items-start space-x-3 space-y-0"
                            >
                              <FormControl>
                                <Checkbox
                                  checked={field.value?.includes(
                                    String(item.typeId),
                                  )}
                                  onCheckedChange={(checked) => {
                                    return checked
                                      ? field.onChange([
                                          ...(field.value || []),
                                          String(item.typeId),
                                        ])
                                      : field.onChange(
                                          (field.value || []).filter(
                                            (value) =>
                                              value !== String(item.typeId),
                                          ),
                                        );
                                  }}
                                />
                              </FormControl>
                              <FormLabel className="font-normal">
                                {item.name}
                              </FormLabel>
                            </FormItem>
                          );
                        }}
                      />
                    ))}
                  </div>

                  <FormMessage />
                </FormItem>
              )}
            />
          )}

          {selectedRole === "KUR-ID" && (
            <>
              <FormField
                control={form.control}
                name="education"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Pendidikan Terakhir</FormLabel>
                    <Select onValueChange={field.onChange} value={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {userEducations?.map((edu: any) => (
                          <SelectItem key={edu.id} value={String(edu.id)}>
                            {edu.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>

                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="school"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Universitas / Perguruan Tinggi</FormLabel>
                    <Select onValueChange={field.onChange} value={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {userSchools?.map((edu: any) => (
                          <SelectItem key={edu.id} value={String(edu.id)}>
                            {edu.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>

                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="competency"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Kompetensi</FormLabel>
                    <Select onValueChange={field.onChange} value={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {userCompetencies?.map((edu: any) => (
                          <SelectItem key={edu.id} value={String(edu.id)}>
                            {edu.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>

                    <FormMessage />
                  </FormItem>
                )}
              />
            </>
          )}
          <FormField
            control={form.control}
            name="nrp"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nomor Regitrasi Polri {`(NRP)`}</FormLabel>
                <FormControl>
                  <Input
                    type="number"
                    placeholder="Masukkan NRP"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          /> */}

          <FormField
            control={form.control}
            name="address"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Alamat</FormLabel>
                <FormControl>
                  <Textarea
                    placeholder="Masukkan alamat"
                    className="resize-none w-1/2"
                    {...field}
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input
                    type="email"
                    placeholder="Masukkan email"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="phoneNumber"
            render={({ field }) => (
              <FormItem>
                <FormLabel>No. Handphone</FormLabel>
                <FormControl>
                  <Input
                    type="number"
                    placeholder="Masukkan nomor handphone"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Password</FormLabel>
                <FormControl>
                  <Input
                    type="password"
                    placeholder="Masukkan kata sandi"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="confirmPassword"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Konfirmasi Kata Sandi</FormLabel>
                <FormControl>
                  <Input
                    type="password"
                    placeholder="Masukkan kata sandi"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />
          <PasswordChecklist
            rules={["minLength", "specialChar", "number", "capital", "match"]}
            minLength={8}
            value={passwordVal || ""}
            valueAgain={confPasswordVal || ""}
            onChange={(isValid) => {
              form.setValue("isValidPassword", isValid);
            }}
            className="text-sm"
            messages={{
              minLength: "Password harus lebih dari 8 karakter",
              specialChar: "Password harus memiliki spesial karakter",
              number: "Password harus memiliki angka",
              capital: "Password harus memiliki huruf kapital",
              match: "Password sama",
            }}
          />
          <Link href="/admin/management-user">
            <Button type="button" color="primary" variant="outline">
              Back
            </Button>
          </Link>
          <Button type="submit" color="primary" className="mx-3">
            Submit
          </Button>
        </form>
      </Form>
    </div>
  );
}