import { useCallback, useRef, useEffect, useState } from "react";
import {
  urlStringToUrlObject,
  SMARTLINK_BASE_URL,
  PrePaymentMethod,
  getEnviroment,
  Environment,
} from "./helpers";

const useSmartlinkComponent = (
  prePaymentMethod: PrePaymentMethod,
  onPaymentSuccess: (successPaymentData: string) => void,
  env: Environment | undefined
) => {
  const iframeRef = useRef<HTMLIFrameElement | null>(null);
  const enviroment = env ?? getEnviroment(window?.location?.href ?? "");
  const smartlinkOrigin = urlStringToUrlObject(SMARTLINK_BASE_URL[enviroment]);

  const [rectangle, setRectangle] = useState<DOMRect | null>(null);

  const sendMessageToIframe = useCallback(
    (message: string) => {
      if (iframeRef?.current) {
        iframeRef?.current?.contentWindow?.postMessage(
          message,
          smartlinkOrigin
        );
      }
    },
    [smartlinkOrigin]
  );

  useEffect(() => {
    const handleMessage = async (event: MessageEvent) => {
      let verbose = true;

      if (event.origin !== smartlinkOrigin) {
        return;
      }

      if (event.data.includes("startPrePaymentMethod")) {
        const [, quoteId] = event.data.split(":");
        const { success, payment_id } = await prePaymentMethod(quoteId);
        sendMessageToIframe(`paymentID:${success ? payment_id : "invalid"}`);
      }

      if (event.data.includes("smartlinkPaymentSuccess")) {
        const successPaymentData = event.data.split(":").slice(1).join(":");
        onPaymentSuccess(successPaymentData);
      }

      if (event.data.includes("ccChargePaymentSuccess")) {
        sendMessageToIframe("submitStripeForm");
      }

      if (event.data.includes("ccChargePaymentError")) {
      }

      if (event.data.includes("rectangle")) {
        verbose = false;
        try {
          const rectangleData = await JSON.parse(event.data);
          if (rectangleData.rectangle) setRectangle(rectangleData.rectangle);
        } catch (error) {
          console.error("Invalid rectangle", error);
        }
      }

      if (verbose) console.log("message from Iframe: ", event.data);
    };

    window.addEventListener("message", handleMessage);

    return () => {
      window.removeEventListener("message", handleMessage);
    };
  }, [smartlinkOrigin, prePaymentMethod, sendMessageToIframe]);

  return {
    iframeRef,
    sendMessageToIframe,
    enviroment,
    rectangle,
  };
};

export default useSmartlinkComponent;