import { registerPlugin } from '@wordpress/plugins';
import { useEffect, useRef, useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';

const CheckoutBanner = () => {
    const [isOpen, setIsOpen] = useState(false);
    const popupRef = useRef(null);
    const contentRef = useRef(null);
    const [isLoading, setIsLoading] = useState(true);
    const [isInitialized, setIsInitialized] = useState(false);
    const previousPaymentMethod = useRef(null);

    const openPopup = (origin = 'component') => {

        if (isLoading && origin === 'component') {
            setIsLoading(false);
            return;
        }

        const popup = document.querySelector('#koin-popup-about');
        if (popup) {
            popup.parentElement.style.display = 'block';
            setIsOpen(true);
        }
    };

    const closePopup = () => {
        const popup = document.querySelector('#koin-popup-about');
        if (popup) {
            popup.parentElement.style.display = 'none';
            setIsOpen(false);
        }
    };

    const activePaymentMethod = useSelect((select) => select(PAYMENT_STORE_KEY).getActivePaymentMethod());

    useEffect(() => {
        document.addEventListener('koinOpenPopup', async () => {
            openPopup('click');
        });
    }, []);

    useEffect(() => {
        if (!isInitialized) {
            previousPaymentMethod.current = activePaymentMethod;
            setIsInitialized(true);
            return;
        }

        if (activePaymentMethod === 'wc-koin-billet' && previousPaymentMethod.current !== 'wc-koin-billet') {
            openPopup();
        }

        previousPaymentMethod.current = activePaymentMethod;
    }, [activePaymentMethod, isInitialized]);

    useEffect(() => {
        const handleOutsideClick = (e) => {
            if (e.target.id === 'koin-popup-about') {
                closePopup();
            }
        };

        const popup = document.querySelector('#koin-popup-about');
        if (popup) {
            popup.addEventListener('click', handleOutsideClick);
        }

        return () => {
            if (popup) {
                popup.removeEventListener('click', handleOutsideClick);
            }
        };

    }, []);

    return (
        <div
            ref={popupRef}
            id="koin-popup-about"
            className={`koin-popup-about ${isOpen ? 'koin-popup-about-active' : ''}`}
        >
            <div
                ref={contentRef}
                className="koin-popup-about-content"
            >
                <i
                    id="koin-close-popup"
                    className="close"
                    onClick={closePopup}
                >
                    &times;
                </i>
                <koin-checkout-banner></koin-checkout-banner>
            </div>
        </div >
    );
};

registerPlugin('checkout-banner', {
    render: CheckoutBanner,
    scope: 'woocommerce-checkout',
});