import React, { useEffect, useMemo, useRef, useState } from 'react';
import { v4 as uuid } from 'uuid';
import type { SnippetLoaderTypes } from './SnippetLoader.types';
import { snippetDefaultLocales, restProxyUrl } from '../../defaultConfigs';


const getUrlParams = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const params: Record<string, string | any> = {};
    for (const pair of urlParams.entries()) {
        if (params[pair[0]] === undefined) {
            params[pair[0]] = pair[1];
        } else if (typeof params[pair[0]] === 'string') {
            params[pair[0]] = [params[pair[0]], pair[1]];
        } else {
            params[pair[0]].push(pair[1]);
        }
    }

    return params;
};

const addScript = (scriptTagId: string,
    restUrl: string,
    appPath: string,
    containerId: string,
    appId: string,
    locale: string,
    messageLoadingFailed: string,
    optionalUrlParams: Record<string, string> = {}) => {

    window.setTimeout(() => {
        const d = window.document.getElementById(containerId + '-loader');
        if (!d) return;
        d.setAttribute('class', 'pinuts-widgets-loading failed');
        d.innerHTML = messageLoadingFailed;
    }, 10000);

    if (window.document.getElementById(scriptTagId)) {
        return;
    }

    const urlParams: Record<string, string> = {
        name: appId,
        containerId: containerId,
        locale: locale,
        ...optionalUrlParams,
    };

    const urlParamsString = Object.keys(urlParams).map(key => `${decodeURI(key)}=${decodeURI(urlParams[key])}`).join('&');
    const loaderUrl = `${restUrl}/${appPath}?${urlParamsString}`;

    const script = window.document.createElement('script');
    script.id = scriptTagId;
    script.src = loaderUrl;

    window.document.body.appendChild(script);
};


const removeScript = (scriptTagId: string) => {
    const script = window.document.getElementById(scriptTagId);
    if (script) {
        script.remove();
    }
};


/**
 * ContactForm2 JS-Snippet loader 22
 * @description This is a JS-Snippet loader for the ContactForm2 component
 * @param props
 * @constructor
 */
const SnippetLoader = ({
    appId,
    locale,
    restUrl,
    containerId,
    appPath,
    messageIsLoading,
    messageLoadingFailed,
    optionalUrlParams = {},
    readParamsFormUrl,
}: SnippetLoaderTypes) => {

    const myRef = useRef(null);

    const [uniqueId] = useState(uuid());
    const containerIdLocal = containerId || `pi-form-${uniqueId}`;
    const [snippetLoadedId, setSnippetLoadedId] = useState('');
    const messageLoadingFailedLocal = messageLoadingFailed || snippetDefaultLocales.loadingFailed[locale] || snippetDefaultLocales.loadingFailed.de;
    const messageIsLoadingLocal = messageIsLoading || snippetDefaultLocales.isLoading[locale] || snippetDefaultLocales.isLoading.de;

    const startElement = useMemo(() => (
        <>
            <div id={containerIdLocal + '-loader'}>
                {messageIsLoadingLocal}
            </div>
            <div id={containerIdLocal} />
        </>
    ), [containerIdLocal, messageIsLoadingLocal]);

    const uniqueFormTagId = useMemo(() => 'pi' + uniqueId + appId + locale, [uniqueId, locale, appId]);

    if (typeof readParamsFormUrl === 'object') {
        const urlParams = getUrlParams();
        Object.keys(readParamsFormUrl).forEach((key) => {
            const v = urlParams[key];
            if (v) {
                optionalUrlParams[readParamsFormUrl[key]] = typeof v === 'string' ? v : JSON.stringify(v);
            }
        });
    }

    useEffect(() => {
        // If a snippet has already been loaded and the id has changed,
        // then delete the old snippet and reset the startElement
        if (snippetLoadedId && snippetLoadedId !== uniqueFormTagId && myRef.current) {
            removeScript(snippetLoadedId);
            setSnippetLoadedId('');
            // @ts-ignore
            myRef.current = startElement;
        }
    }, [uniqueFormTagId, startElement, snippetLoadedId, myRef]);

    useEffect(() => {
        if (!snippetLoadedId) {
            setSnippetLoadedId(uniqueFormTagId);
            addScript(uniqueFormTagId,
                restUrl || restProxyUrl,
                appPath,
                containerIdLocal,
                appId,
                locale,
                messageLoadingFailedLocal,
                optionalUrlParams);
        }
    }, [appId, locale, restUrl, containerIdLocal, snippetLoadedId, uniqueId, appPath, messageLoadingFailedLocal, optionalUrlParams, uniqueFormTagId]);

    return (
        <div ref={myRef}>
            {startElement}
        </div>
    );
};

export default SnippetLoader;