import React, { useEffect } from "react";
import {
  SMARTLINK_BASE_URL,
  Environment,
  assembleURLWithOriginHashAndPin,
} from "./helpers";
import useSmartlinkComponent from "./useSmartlinkComponent";

interface SmartlinkComponentProps {
  hash: string;
  pin?: string;
  prePaymentMethod: (
    quoteId: string,
  ) => Promise<{ success: boolean; payment_id: string }>;
  env?: Environment;
  onPaymentSuccess?: (successPaymentData: string) => void;
  customStyle?: React.CSSProperties;
}

const SmartlinkComponent: React.FC<SmartlinkComponentProps> = ({
  hash,
  pin,
  prePaymentMethod,
  onPaymentSuccess = (successPaymentData: string) => {},
  env,
  customStyle,
}) => {
  const { iframeRef, enviroment } = useSmartlinkComponent(
    prePaymentMethod,
    onPaymentSuccess,
    env,
  );
  const iframeBaseUrl = SMARTLINK_BASE_URL[enviroment];
  const iframeSrc = assembleURLWithOriginHashAndPin(iframeBaseUrl, hash, pin);

  return (
    <iframe
      id="paymentIframe"
      ref={iframeRef}
      src={iframeSrc}
      title="smart component"
      style={{
        width: "320px",
        height: "650px",
        overflow: "hidden", // never scroll — hook keeps dimensions in sync
        display: "block", // removes inline baseline gap
        ...customStyle,
      }}
    />
  );
};

export default SmartlinkComponent;