import { useBillingConfig } from "@/components/billing/billing-context";
import { useLocale } from "@/hooks/use-localed";
import { Elements } from "@stripe/react-stripe-js";
import {
  type Appearance,
  loadStripe,
  type StripeElementsOptions,
} from "@stripe/stripe-js";
import { type FC, useMemo } from "react";

export const appearance: Appearance = {
  theme: "stripe",
  variables: {
    fontFamily: "var(--font-moderat)",
    fontSizeBase: "14px",
    borderRadius: "8px",
    spacingUnit: "3.375px",
    colorPrimary: "#18181B",
    colorDanger: "#EF4444FF",
  },
};

export function useStripePromise() {
  const config = useBillingConfig();
  return useMemo(() => {
    return loadStripe(config.stripe.public_key);
  }, [config.stripe.public_key]);
}

export function withStripeElementsHoc<P extends object>(
  FunctionalComponent: FC<P>,
  options?: StripeElementsOptions
): FC<P> {
  return ((props: P) => {
    const stripePromise = useStripePromise();
    const locale = useLocale();

    return (
      <Elements
        stripe={stripePromise}
        options={{
          locale,
          appearance,
          ...options,
        }}
      >
        <FunctionalComponent {...props} />
      </Elements>
    );
  }) satisfies FC<P>;
}