import $ from 'jquery';

(function($){

    const AdminOrder = {
        init: () => {
            
        },
        checkOrderStatus: () => {

            const spinner = jQuery('#cembrapay-order-status-spinner');
            spinner.css('visibility', 'visible');

            const responseContainer = jQuery('#cembrapay-order-status');

            responseContainer.empty();

            jQuery.ajax('/wp-json/cembrapay/v1/get-cembrapay-order-status', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('X-WP-Nonce', cembrapayAdminOrder.nonce)
                },
                data: JSON.stringify({
                    orderId: cembrapayAdminOrder.orderId
                }),
                dataType: 'json',
                success: function (response) {

                    if( response.lastCheck && response.lastCheck.checkoutStatus ) {
                        responseContainer.append('<p><strong>Status:</strong> ' + response.lastCheck.checkoutStatus.checkoutStatus + '</p>');
                        if( response.moreChecks && Object.keys(response.moreChecks).length > 0 ) {
                            let moreChecks = `
                                <p><a id="more-status-checks" style="cursor:pointer;"><strong>${ cembrapayAdminOrder.strings.moreStatusChecks }</strong></a></p>
                                <div id="more-status-checks-container" style="display:none;">
                                    <table style="width:100%;">
                                        <thead>
                                            <tr>
                                                <th style="text-align: left;">${ cembrapayAdminOrder.strings.date }</th>
                                                <th style="text-align: left;">${ cembrapayAdminOrder.strings.status }</th>
                                            </tr>
                                        </thead>
                                        <tbody>`;
                                        Object.keys(response.moreChecks).map( (key, idx) => {
                                            moreChecks += `
                                                <tr>
                                                    <td>${ response.moreChecks[key]['date'] }</td>
                                                    <td>${ response.moreChecks[key]['checkoutStatus']['checkoutStatus'] }</td>
                                                </tr>
                                            `;
                                        });
                                        moreChecks += `</tbody>
                                    </table>
                                </div>
                            `;

                            responseContainer.append(moreChecks);

                        }
                    }

                    spinner.css('visibility', 'hidden');
                    
                }
            });

        }
    }

    jQuery(() => {

        AdminOrder.init();

        jQuery('body').on('click', '#check-cembrapay-order-status', function(evt) {
            evt.preventDefault();
            AdminOrder.checkOrderStatus();
        });

        jQuery('body').on('click', '#more-status-checks', function(evt) {
            evt.preventDefault();
            jQuery('#more-status-checks-container').toggle();
        });
        
    });

})(jQuery);