"use client";
import UpdateExpertiseForm from "@/components/forms/expertise/edit/UpdateExpertiseForm";
import Loader from "@/components/Loader";
import SectionTitle from "@/components/SectionTitle";
import {useGetSingleExpertise, useUpdateExpertise} from "@/hooks/expertise";
import {useGetLanguages} from "@/hooks/languages";

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: singleExpertise,

  } = useGetSingleExpertise(id?.toString() ?? "");

  const {isPending, mutateAsync} = useUpdateExpertise();
  const {data} = singleExpertise || {};
  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={`/expertise/new`}
            className="text-sm bg-[#313131] px-4 py-2 rounded-lg text-white"
          >
            افزودن تخصص جدید
          </Link>
          <Link
            href={`/expertise`}
            className="text-sm bg-primary px-4 py-2 rounded-lg text-white"
          >
            مشاهده لیست تخصص ها
          </Link>
        </div>
      </div>
      <Suspense fallback={<Loader />}>
        {data && languages && !loading && (
          <UpdateExpertiseForm
            preValues={singleExpertise?.data}
            router={router}
            languages={languages?.data}
            updatePending={isPending}
            id={id?.toString() ?? ""}
            updateFn={mutateAsync}
          />
        )}
      </Suspense>
    </div>
  );
}
