import { useParams } from "react-router-dom"
import { MetadataForm } from "@components/forms/metadata-form/metadata-form"
import {
  useShippingProfile,
  useUpdateShippingProfile,
} from "@hooks/api"
import { ClientError } from "@mercurjs/client"

export const ShippingProfileMetadata = () => {
  const { shipping_profile_id } = useParams()

  const { shipping_profile, isPending, isError, error } = useShippingProfile(
    shipping_profile_id!
  )
  const { mutateAsync, isPending: isMutating } = useUpdateShippingProfile(
    shipping_profile_id!
  )

  if (isError) {
    throw error
  }

  const handleSubmit = async (
    params: { metadata?: Record<string, unknown> | null },
    callbacks: { onSuccess?: () => void; onError?: (error: ClientError | string) => void }
  ) => {
    try {
      const result = await mutateAsync({
        metadata: params.metadata === undefined ? undefined : params.metadata,
      })
      callbacks.onSuccess?.()

      return result
    } catch (error) {
      const message = error instanceof ClientError ? error.message : 'An error occurred'
      callbacks.onError?.(message)
      throw error
    }
  }

  return (
    <MetadataForm
      metadata={shipping_profile?.metadata}
      hook={handleSubmit}
      isPending={isPending}
      isMutating={isMutating}
    />
  )
}