"use client";
import UpdatePatientForm from "@/components/forms/patients/edit/UpdatePatientForm";
import Loader from "@/components/Loader";
import SectionTitle from "@/components/SectionTitle";
import {useGetAllCountries} from "@/hooks/country";
import {useGetSinglePatient, useUpdatePatient} from "@/hooks/patients";
import {useUpdateUser} from "@/hooks/users";

import Link from "next/link";
import {useParams, useRouter} from "next/navigation";
import {Suspense, useState} from "react";

export default function Page() {
  const router = useRouter();
  const {data: countries, isLoading: fetchCountriesLoading} =
    useGetAllCountries();
  const params = useParams();
  const id = params?.id;
  const [loading, setLoading] = useState(false);

  const {
    data: singleUser,
    isLoading,
    error,
  } = useGetSinglePatient(id?.toString() ?? "");

  const {isPending, mutateAsync} = useUpdatePatient();
  const {data} = singleUser || {};


  

  return (
    <div>
      <div className="flex items-center justify-between mb-10">
        <SectionTitle label="فرم ویرایش اطلاعات بیمار " />
        <div className="flex items-center justify-center gap-x-4">
          <Link
            href={`/patients/new`}
            className="text-sm bg-[#313131] px-4 py-2 rounded-lg text-white"
          >
            افزودن بیمار جدید
          </Link>
          <Link
            href={`/patients`}
            className="text-sm bg-primary px-4 py-2 rounded-lg text-white"
          >
            مشاهده لیست بیماران
          </Link>
        </div>
      </div>
      <Suspense fallback={<Loader />}>
        {data && countries && (
          <UpdatePatientForm
            router={router}
            id={id?.toString() || ""}
            preValues={data}
            updateFn={mutateAsync}
            countries={countries?.data}
            fetchCountriesLoading={fetchCountriesLoading}
          />
        )}
      </Suspense>
    </div>
  );
}
