import { useParams } from "react-router-dom"

import { RouteFocusModal } from "../../../components/modals"
import { useShippingOption } from "../../../hooks/api/shipping-options"
import { EditShippingOptionsPricingForm } from "./components/create-shipping-options-form"

export function LocationServiceZoneShippingOptionPricing() {
  const { so_id, location_id } = useParams()

  if (!so_id) {
    throw new Response(
      JSON.stringify({ message: "Shipping Option ID paramater is missing" }),
      { status: 404, headers: { "Content-Type": "application/json" } }
    )
  }

  const {
    shipping_option: shippingOption,
    isError,
    error,
  } = useShippingOption(so_id, {
    fields: "*prices,*prices.price_rules",
  })

  if (isError) {
    throw error
  }

  return (
    <RouteFocusModal prev={`/settings/locations/${location_id}`} data-testid="location-shipping-option-pricing-modal">
      {shippingOption && (
        <EditShippingOptionsPricingForm shippingOption={shippingOption} />
      )}
    </RouteFocusModal>
  )
}