"use client";
import UpdateMedicalPackageForm from "@/components/forms/medical-packages/edit/UpdateMedicalPackageForm";
import Loader from "@/components/Loader";
import SectionTitle from "@/components/SectionTitle";
import {useGetLanguages} from "@/hooks/languages";
import {
  useGetAllMedicalPackagesParent,
  useGetSingleMedicalPackage,
  useUpdateMedicalPackage,
} from "@/hooks/medical-package";
import {useQueryClient} from "@tanstack/react-query";

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 queryClient = useQueryClient();
  const [lang] = useState("fa");
  const [loading] = useState(false);
  const {
    data: languages,
  } = useGetLanguages();

  const {
    data: singleMedicalPackage,
  } = useGetSingleMedicalPackage({id: id?.toString() ?? "", lang});
  const {data: parents} =
    useGetAllMedicalPackagesParent("fa");

  const {isPending, mutateAsync} = useUpdateMedicalPackage();
  const {data} = singleMedicalPackage || {};
  return (
    <div>
      <div className="flex items-center justify-between mb-10">
        <div className="flex items-center gap-x-4">
          <SectionTitle label="فرم ویرایش خدمت پزشکی " />
        </div>
        <div className="flex items-center justify-center gap-x-4">
          <Link
            href={`/medical-packages/new`}
            className="text-sm bg-[#313131] px-4 py-2 rounded-lg text-white"
          >
            افزودن خدمت پزشکی جدید
          </Link>
          <Link
            href={`/medical-packages`}
            className="text-sm bg-primary px-4 py-2 rounded-lg text-white"
          >
            مشاهده لیست خدمات پزشکی
          </Link>
        </div>
      </div>
      <Suspense fallback={<Loader />}>
        {data && languages && !loading && (
          <UpdateMedicalPackageForm
            preValues={singleMedicalPackage?.data}
            router={router}
            languages={languages?.data}
            updatePending={isPending}
            id={id?.toString() ?? ""}
            updateFn={mutateAsync}
            parents={parents?.data}
            queryClient={queryClient}
          />
        )}
      </Suspense>
    </div>
  );
}
