import { Fragment, ReactNode } from "react";
import LinkOrAhref from "./LinkOrAhref";
import ButtonEvent from "./ButtonEvent";
import { useNavigation, useSearchParams, useSubmit } from "react-router";
import clsx from "clsx";

interface Props {
  type?: "button" | "submit";
  to?: string | undefined;
  submits?: { action: string; values: { [key: string]: string } };
  children: ReactNode;
  className?: string;
  target?: undefined | "_blank";
  role?: string;
  rel?: string;
  event?: {
    action: string;
    category: string;
    label: string;
    value: string;
  };
  onClick?: () => void;
  sendEvent?: boolean;
  disabled?: boolean;
}
export default function ButtonSubmitForm({ submits, type, to, target, children, className, role, rel, event, onClick, sendEvent = true, disabled }: Props) {
  const submit = useSubmit();
  const navigation = useNavigation();
  const [searchParams] = useSearchParams();
  const isLoading = navigation.state === "submitting" && navigation.formData?.get("action") === submits?.action;

  function onClicked() {
    if (!submits) {
      return;
    }
    const formData = new FormData();
    formData.append("action", submits.action ?? "");
    const values: { [key: string]: string } = submits?.values;
    for (const key in values) {
      formData.append(key, values[key]);
    }
    if (submits.action === "subscribe") {
      formData.set("coupon", searchParams.get("coupon")?.toString() ?? "");
    }
    submit(formData, {
      method: "post",
    });
  }
  return (
    <Fragment>
      {event ? (
        <ButtonEvent
          event={event}
          type={type}
          to={submits ? undefined : to}
          target={target}
          className={clsx(className, isLoading && "base-spinner")}
          role={role}
          rel={rel}
          onClick={onClicked}
          disabled={disabled}
        >
          {children}
        </ButtonEvent>
      ) : (
        <LinkOrAhref
          type={type}
          to={submits ? undefined : to}
          target={target}
          className={clsx(className, isLoading && "base-spinner")}
          role={role}
          rel={rel}
          onClick={onClicked}
          disabled={disabled}
        >
          {children}
        </LinkOrAhref>
      )}
    </Fragment>
  );
}