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


class PagaleveCheckoutHandler {
    static submitPayment(isClassicCheckout) {
        if (isClassicCheckout) {
            jQuery('form.checkout').submit();
        } else {
            const checkoutButton = document.querySelector('.wc-block-components-checkout-place-order-button');
            checkoutButton?.click();
        }
    }

    static selectPaymentMethod(isClassicCheckout) {
        if (isClassicCheckout) {
            jQuery('input[name="payment_method"][value="pagaleve-pix"]').click();
        } else {
            document.getElementById('radio-control-wc-payment-method-options-pagaleve-pix')?.click();
        }
    }

    static handleMessageEvents(event, isClassicCheckout) {
        if (!event.data?.type) return;

        switch (event.data.type) {
            case 'PagaleveProviderScript:SelectSplitPaymentMessage':
            case 'PagaleveProviderScript:StartSplitPaymentMessage':
                this.selectPaymentMethod(isClassicCheckout);
                if (event.data.type === 'PagaleveProviderScript:StartSplitPaymentMessage') {
                    this.submitPayment(isClassicCheckout);
                }
                break;
        }
    }

    static sendPaymentStartedMessage() {
        const iframe = document.getElementById("pagaleve-provider-script-repechage");
        iframe?.contentWindow.postMessage({
            type: 'PagaleveProviderScript:PaymentStartedMessage'
        }, '*');
    }

    static sendMetaDataMessage(metaData) {
        const iframe = document.getElementById("pagaleve-provider-script-repechage");
        iframe?.contentWindow.postMessage({
            type: 'PagaleveProviderScript:MetadataMessage',
            data: metaData
        }, '*');
    }
}

// Classic checkout handler
if (document.querySelector('form.checkout')) {
    jQuery(document).ready(($) => {
        window.addEventListener('message', (event) =>
            PagaleveCheckoutHandler.handleMessageEvents(event, true)
        );


        $(document.body).on('checkout_error', () => {
            const form = $('form.checkout');
            const metaData = {
                errors: $('.woocommerce-error li').map(function () {
                    return $(this).text().trim();
                }).get(),
                paymentMethod: $('input[name="payment_method"]:checked').val() || '',
                amount: parseInt($('.order-total .woocommerce-Price-amount').first().text().replace(/\D/g, '')),
                cep: form.find('#billing_postcode').val() || '',
                cpf: form.find('#billing_cpf').val() || '',
                email: form.find('#billing_email').val() || '',
                name: `${form.find('#billing_first_name').val() || ''} ${form.find('#billing_last_name').val() || ''}`.trim(),
                phone: form.find('#billing_phone').val() || ''
            };
            PagaleveCheckoutHandler.sendMetaDataMessage(metaData);
        });

        $('form.checkout').on('submit', () => {
            PagaleveCheckoutHandler.sendPaymentStartedMessage();
        });
    });
} else {
    // Blocks checkout handler
    const CheckoutObserver = () => {
        const { isAfterProcessing, hasError } = useSelect((select) => ({
            isAfterProcessing: select(CHECKOUT_STORE_KEY).isAfterProcessing(),
            hasError: select(CHECKOUT_STORE_KEY).hasError(),
        }));

        const payment = useSelect((select) => select(PAYMENT_STORE_KEY));
        const paymentStarted = useSelect((select) => select(CHECKOUT_STORE_KEY).isBeforeProcessing());

        useEffect(() => {
            window.addEventListener('message', (event) =>
                PagaleveCheckoutHandler.handleMessageEvents(event, false)
            );
            return () => {
                window.removeEventListener('message', (event) =>
                    PagaleveCheckoutHandler.handleMessageEvents(event, false)
                );
            };
        }, []);

        useEffect(() => {
            if (isAfterProcessing && hasError) {
                const state = payment.getState();
                const customerData = select(CART_STORE_KEY).getCustomerData();
                const cartTotals = select(CART_STORE_KEY).getCartTotals();
                PagaleveCheckoutHandler.sendMetaDataMessage({
                    errors: [state.paymentResult.message],
                    paymentMethod: state.activePaymentMethod,
                    amount: cartTotals.total_price,
                    cep: customerData.billingAddress.postcode,
                    cpf: document.querySelector('[id*="billing_cpf"], [name*="billing_cpf"]')?.value,
                    email: customerData.billingAddress.email,
                    name: customerData.shippingAddress.first_name + ' ' + customerData.shippingAddress.last_name,
                    phone: customerData.billingAddress.phone,
                });
            }
        }, [isAfterProcessing, hasError]);

        useEffect(() => {
            if (paymentStarted) {
                PagaleveCheckoutHandler.sendPaymentStartedMessage();
            }
        }, [paymentStarted]);

        return null;
    };

    registerPlugin('wc-pagaleve-checkout-observer', {
        render: CheckoutObserver,
        scope: 'woocommerce-checkout',
    });
}