nobat724_front/components/appointment/index.js

"use client";

import { useEffect, useState } from "react";
import { request } from "@/services/response";
import Cookies from "js-cookie";
import Container from "./Container";

const defaultData = {
  phone: { value: "", isEdit: false },
  national_code: { value: "", isEdit: true },
  name: { value: "", isEdit: true },
  basic_insurance: { value: "", isEdit: true },
};

function AppointmentPage({ doctor, disabledDates, matchedCity }) {
  const [step, setStep] = useState(0);
  const [isForAnother, setIsForAnother] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  const [prevData, setPrevData] = useState(defaultData);
  const [data, setData] = useState(defaultData);

  // Login states
  const [num, setNum] = useState("");
  const [uuid, setUuid] = useState("");
  const [isSendMsg, setIsSendMsg] = useState(false);

  // Appointment slot states
  const [selectedSlot, setSelectedSlot] = useState(null);
  const [selectedDate, setSelectedDate] = useState(null);

  useEffect(() => {
    const fetchUserData = async () => {
      setIsLoading(true);

      const userInfo = Cookies.get("userInfo");
      const parsedData = userInfo && JSON.parse(userInfo);
      const usernameFromCookie = parsedData?.username || "";

      // ابتدا شماره موبایل را از Cookie ست می‌کنیم
      if (usernameFromCookie) {
        setData(prev => ({
          ...prev,
          phone: { value: usernameFromCookie, isEdit: false },
        }));
      }

      // سپس اگر uuid داریم، بقیه اطلاعات را از API می‌گیریم
      if (userInfo && parsedData) {
        try {
          const res = await request.getUserProfile(parsedData.uuid);

          if (res) {
            const newData = {
              uuid: res.uuid,
              phone: { value: usernameFromCookie, isEdit: false },
              national_code: {
                value: res.national_code || "",
                isEdit: res.national_code ? false : true,
              },
              name: { value: `${res.name} ${res.family}`, isEdit: true },
              basic_insurance: {
                value: res.basic_insurance,
                isEdit: true,
              },
            };
            setData(newData);
            setPrevData(newData);
          }
        } catch (error) {
          // خطا در دریافت پروفایل
        } finally {
          setIsLoading(false);
        }
      } else {
        setIsLoading(false);
      }
    };

    fetchUserData();
  }, []); // فقط یک بار در mount اولیه اجرا می‌شه

  // useEffect جداگانه برای زمانی که step تغییر می‌کنه
  useEffect(() => {
    const refetchUserData = async () => {
      if (step === 3) {
        const userInfo = Cookies.get("userInfo");
        const parsedData = userInfo && JSON.parse(userInfo);
        const usernameFromCookie = parsedData?.username || "";

        if (userInfo && parsedData && !data.uuid) {
          try {
            const res = await request.getUserProfile(parsedData.uuid);

            if (res) {
              const newData = {
                uuid: res.uuid,
                phone: { value: usernameFromCookie, isEdit: false },
                national_code: {
                  value: res.national_code || "",
                  isEdit: res.national_code ? false : true,
                },
                name: { value: `${res.name} ${res.family}`, isEdit: true },
                basic_insurance: {
                  value: res.basic_insurance,
                  isEdit: true,
                },
              };
              setData(newData);
              setPrevData(newData);
            }
          } catch (error) {
            // خطا در دریافت پروفایل
          }
        }
      }
    };

    refetchUserData();
  }, [step]);


  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="flex flex-col items-center gap-4">
          <div className="w-12 h-12 border-4 border-[#5559CE] border-t-transparent rounded-full animate-spin"></div>
          <p className="text-[#3B3B3B] text-[16px]">در حال بارگذاری...</p>
        </div>
      </div>
    );
  }

  return (
    <Container
      step={step}
      data={data}
      doctor={doctor}
      setData={setData}
      setStep={setStep}
      prevData={prevData}
      matchedCity={matchedCity}
      isForAnother={isForAnother}
      setIsForAnother={setIsForAnother}
      disabledDates={disabledDates}
      num={num}
      setNum={setNum}
      uuid={uuid}
      setUuid={setUuid}
      isSendMsg={isSendMsg}
      setIsSendMsg={setIsSendMsg}
      selectedSlot={selectedSlot}
      setSelectedSlot={setSelectedSlot}
      selectedDate={selectedDate}
      setSelectedDate={setSelectedDate}
    />
  );
}

export default AppointmentPage;