nobat724_front/components/dashboard/userAccount/detailUser/information/index.js

import { useEffect, useState } from "react";
import Image from "next/image";
import { toast } from "react-toastify";
import Form from "./form";
import { request } from "@/services/response";
import ButtonSendData from "./ButtonSendData";
import { changeDateType, getParsedUserInfo, imageUrl } from "@/helper";
import { disease } from "./form/disease";
import LoadingComponent from "@/app/component/LoadingComponent";

function Information({ information, setInformation }) {
  const [loading, setLoading] = useState(false);
  const [insurance, setInsurance] = useState();
  const [errors, setErrors] = useState({});
  const [loadingInfo, setLoadingInfo] = useState(true);
  const [avatarUploading, setAvatarUploading] = useState(false);

  const handleAvatarChange = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setAvatarUploading(true);
    try {
      const res = await request.uploadUserAvatar(file);
      const url = res?.data?.avatar || res?.data?.url;
      if (url) {
        setInformation((prev) => ({ ...(prev || {}), avatar: url }));
        toast.success("عکس پروفایل به‌روزرسانی شد");
      }
    } catch {
      toast.error("خطا در آپلود عکس");
    } finally {
      setAvatarUploading(false);
      e.target.value = "";
    }
  };

  useEffect(() => {
    const parsedUserInfo = getParsedUserInfo();

    request.getInsuranceType().then((res) => {
      const items = res?.data?.data;
      if (Array.isArray(items)) {
        setInsurance(items);
      }
    });

    if (parsedUserInfo) {
      request
        .getUserProfile(parsedUserInfo.uuid)
        .then((res) => {
          setLoadingInfo(false);
          const profile = res?.data?.data;

          const hasProfileData = Boolean(
            profile && (profile.label || profile.family || profile.national_code)
          );

          if (hasProfileData) {
            let changedData = { ...profile };
            // backend stores the first name in `label`; the form binds to `name`
            changedData.name = profile?.label ?? "";
            delete changedData.label;
            changedData.basic_insurance = profile?.basic_insurance_id ? [profile.basic_insurance_id] : [];
            changedData.supplementary_insurance = profile?.supplementary_insurance_id ? [profile.supplementary_insurance_id] : [];
            changedData.other = profile?.other ?? {
              disease,
              allergies: [],
              medications: [],
              surgeries: [],
              family_history: [],
              relatives: [],
            };
            changedData.prev_data = true;
            changedData = changeDateType(changedData, false);
            setInformation(changedData);
          } else {
            setInformation({
              uuid: profile?.uuid,
              prev_data: false,
              other: {
                disease: disease,
                allergies: [],
                medications: [],
                surgeries: [],
                family_history: [],
                relatives: [],
              },
            });
          }
        })
        .catch(() => {
          setLoadingInfo(false);
          setInformation({
            prev_data: false,
            other: {
              disease: disease,
              allergies: [],
              medications: [],
              surgeries: [],
              family_history: [],
              relatives: [],
            },
          });
        });
    } else {
      setLoadingInfo(false);
    }
  }, []);

  const changeData = (value, name) => {
    setInformation({
      ...information,
      [name]: value,
    });
    if (errors && errors[name]) {
      setErrors((prevErrors) => ({
        ...prevErrors,
        [name]: false,
      }));
    }
  };

  return (
    <LoadingComponent loading={loadingInfo}>
      <div className="opacity-page">
        <div className="flex items-center gap-[16px] mb-[24px]">
          <Image
            src={imageUrl(information?.avatar, "/assets/images/profile-user.png")}
            alt="avatar"
            width={72}
            height={72}
            className="w-[72px] h-[72px] rounded-full object-cover border border-[#EFEFEF]"
          />
          <label className="cursor-pointer text-[#5559CE] text-[14px] font-medium">
            {avatarUploading ? "در حال آپلود..." : "تغییر عکس"}
            <input
              type="file"
              accept="image/*"
              hidden
              disabled={avatarUploading}
              onChange={handleAvatarChange}
            />
          </label>
        </div>
        <Form
          errors={errors}
          insurance={insurance}
          changeData={changeData}
          information={information}
        />
        <ButtonSendData
          setInformation={setInformation}
          information={information}
          setLoading={setLoading}
          setErrors={setErrors}
          loading={loading}
          errors={errors}
        />
      </div>
    </LoadingComponent>
  );
}

export default Information;