"use client";
import UpdateDoctorForm from "@/components/forms/doctor/update/UpdateDoctorForm";
import Loader from "@/components/Loader";
import SectionTitle from "@/components/SectionTitle";
import { useGetAllExpertiseList } from "@/hooks/expertise";
import { useGetLanguages } from "@/hooks/languages";
import {useGetSingleUser, 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 params = useParams();
  const id = params?.id;
  const router = useRouter();
  const [loading] = useState(false);
  const {
    data: languages,
  } = useGetLanguages();
  const {
    data: expertises,
  } = useGetAllExpertiseList();
  const {
    data: singleUser,
  } = useGetSingleUser(id?.toString() ?? "");

  const {mutateAsync} = useUpdateUser();
  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={`/department/members/new`}
            className="text-sm bg-[#313131] px-4 py-2 rounded-lg text-white"
          >
            افزودن عضو جدید
          </Link>
          <Link
            href={`/department/members`}
            className="text-sm bg-primary px-4 py-2 rounded-lg text-white"
          >
            مشاهده لیست اعضاء دپارتمان
          </Link>
        </div>
      </div>
      <Suspense fallback={<Loader />}>
        {data && expertises && languages && !loading && (
          <UpdateDoctorForm
            expertises={expertises?.data}
            router={router}
            languages={languages?.data}
            preValues={data}
            id={id?.toString() ??""}
            updateFn={mutateAsync}
          />
        )}
      </Suspense>
    </div>
  );
}
