import useAppSelector from "@insite/client-framework/Common/Hooks/useAppSelector";
import { useEffect, useState } from "react";

// TokenEx doesn't provide an npm package or type definitions for using the iframe solution.
// This is just enough types to avoid the build warnings and make using TokenEx a bit easier.
export type TokenExIframeStyles = {
    base?: string;
    focus?: string;
    error?: string;
    cvv?: TokenExIframeStyles;
};

export type TokenExIframeConfig = {
    tokenExID: string;
    tokenScheme: string;
    authenticationKey: string;
    timestamp: string;
    origin: string;
    styles?: TokenExIframeStyles;
    pci?: boolean;
    enableValidateOnBlur?: boolean;
    inputType?: "number" | "tel" | "text";
    debug?: boolean;
    cvv?: boolean;
    cvvOnly?: boolean;
    cvvContainerID?: string;
    cvvInputType?: "number" | "tel" | "text";
    enableAriaRequired?: boolean;
    customDataLabel?: string;
    title?: string;
};

export type TokenExPCIIframeConfig = TokenExIframeConfig & {
    pci: true;
    enablePrettyFormat?: boolean;
};

export type TokenExCvvOnlyIframeConfig = TokenExIframeConfig & {
    cvvOnly: true;
    token?: string;
    cardType?: string;
};

export type IFrame = {
    new (containerId: string, config: TokenExIframeConfig): IFrame;
    load: () => void;
    on: (
        eventName: "load" | "validate" | "tokenize" | "error" | "cardTypeChange",
        callback: (data: any) => void,
    ) => void;
    remove: () => void;
    validate: () => void;
    tokenize: () => void;
    reset: () => void;
};

export type TokenEx = {
    Iframe: IFrame;
};

declare const TokenEx: TokenEx;

export interface TokenExFormEventHandlers {
    onLoad: (data: any) => void;
    onTokenize: (data: any) => void;
    onCardTypeChange: (data: any) => void;
    onValidate: (data: any) => void;
    onError: (data: any) => void;
}

export const useTokenExFrame = () => {
    const [tokenExLibraryIsLoaded, setTokenExLibraryIsLoaded] = useState(false);
    const websiteSettings = useAppSelector(state => state.context.settings.settingsCollection.websiteSettings);
    useEffect(() => {
        if (websiteSettings.useTokenExGateway || websiteSettings.useECheckTokenExGateway) {
            const script = document.createElement("script");
            script.src = websiteSettings.tokenExTestMode
                ? "https://test-htp.tokenex.com/Iframe/Iframe-v3.min.js"
                : "https://htp.tokenex.com/Iframe/Iframe-v3.min.js";
            script.async = true;
            script.onload = () => setTokenExLibraryIsLoaded(true);

            document.body.appendChild(script);

            return () => {
                document.body.removeChild(script);
            };
        }
    }, []);

    return tokenExLibraryIsLoaded;
};
