"use client"
import ServiceForm from "../ServiceForm"
import { useUpdateService, useGetServices, useGetServiceById } from "@/lib/react-query/hooks/services"
import { useParams } from "next/navigation"
import { useTranslations } from "next-intl"

export function EditServiceMain() {
  const { id } = useParams() as { id: string }
  const { data: services, isLoading } = useGetServices()
  const { data: serviceDetails, isLoading: isDetailsLoading } = useGetServiceById(id)
  const updateServiceMutation = useUpdateService()
  const t = useTranslations()

  const onSubmit = async (data: any) => {
    await updateServiceMutation.mutateAsync({ id, payload: data })
  }

  if (isLoading || isDetailsLoading) return <div>{t("services.messages.loading")}</div>
  if (!serviceDetails) return <div>{t("services.messages.notFound")}</div>

  return (
    <ServiceForm onSubmit={onSubmit} isSubmitting={updateServiceMutation.isPending} submitLabel={t("services.form.updateButton")} initialValues={serviceDetails} />
  )
}