import { updateCustomerAPI, useCustomer } from "@/api";
import { LoadingData } from "@/components/common";
import { CustomerForm } from "@/components/customers";
import { BasePage, Header } from "@/components/layout";
import { HandleError } from "@/pages/others";
import { CAPABILITY } from "@/utils/consts";
import { __ } from "@wordpress/i18n";
import { useParams, useSearchParams } from "react-router";

export const UpdateCustomer = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const params = useParams();
  const { data, error, isLoading } = useCustomer(params.id);
  const navigateTo =
    searchParams.get("from") === "detail" ? `/${params.id}` : "/";

  if (error) return <HandleError error={error} />;
  if (isLoading) return <LoadingData />;

  return (
    <BasePage capability={CAPABILITY.WRITE}>
      <Header title={__("Edit Customer", "yoyaku-manager")} />
      <CustomerForm
        defaultValues={data}
        dataHandler={updateCustomerAPI}
        navigateTo={navigateTo}
      />
    </BasePage>
  );
};