import React, { VoidFunctionComponent, useEffect, useRef, useState } from 'react';
import { ViewProps } from './ViewRenderer';

export interface UrlViewProps {
    url: string;

    /** Inject CSS into the webview */
    css?: string;

    /** Inject JS into the webview */
    js?: string;

    /** Add query parameters to the url */
    query?: Record<string, string>;

    /** Set or clear the localStorage of the webview */
    localStorage?: Record<string, string | null>;
}

interface DetailedHTMLWebViewElement extends HTMLWebViewElement {
    removeInsertedCSS: (key: string) => void;
    insertCSS: (css: string) => Promise<string>;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    executeJavaScript: (code: string, userGesture?: boolean) => Promise<any>;
    openDevTools: () => void;
    closeDevTools: () => void;
    reload: () => void;
    reloadIgnoringCache: () => void;
}
 
const UrlView: VoidFunctionComponent<UrlViewProps & ViewProps> = ({ url, css, js, query, localStorage, mouseInteraction, onReady }) => {
    const ref = useRef<DetailedHTMLWebViewElement>(null);
    const readyTimeoutRef = useRef<NodeJS.Timeout | null>(null);

    const [cssKey, setCssKey] = useState<string>();

    /** Load optional CSS and localStorage in the ref */ 
    const manipulateContent = () => {
        ref.current?.addEventListener('crashed', () => {
            ref.current?.reloadIgnoringCache();
        });

        ref.current?.addEventListener('did-finish-load', () => {
            if (cssKey) {
                ref.current?.removeInsertedCSS(cssKey);
                setCssKey(undefined);
            }

            if (css) {
                ref.current?.insertCSS(css).then((key: string) => {
                    setCssKey(key);
                });
            }

            if (js) {
                ref.current?.executeJavaScript(js);
            }

            if (localStorage) {
                let script = '';

                Object.keys(localStorage).forEach((key) => {
                    const content = localStorage[key];

                    if (!content) {
                        script += `localStorage.removeItem('${key}');`; 
                    } else {
                        script += `localStorage.setItem('${key}', '${content}');`; 
                    }
                });

                ref.current?.executeJavaScript(script);
            }

            readyTimeoutRef.current && clearTimeout(readyTimeoutRef.current);
            readyTimeoutRef.current = setTimeout(onReady, 500);
        });
    };

    const getURL = (url: string, query?: Record<string, string>): string => {
        const updatedURL = new URL(url);

        if (query) {
            Object.keys(query).forEach(key => {
                updatedURL.searchParams.set(key, query[key]);
            });
        }

        return updatedURL.href;
    };

    useEffect(manipulateContent, []);

    return (
        <webview
            ref={ ref }
            src={ getURL(url, query) }
            className={ `w-screen h-screen bg-horizon-gray dark:bg-gray-900 ${mouseInteraction ? 'overflow-auto' : 'overflow-hidden'}` } /> 
    );
};
 
export default UrlView;