<script type="text/javascript">

    jQuery(document).ready(function ($) {


    let ws;
    let pingInterval;
    const HOST_ID = {{ host_id }};

    function sendPing(service) {
            if (ws && ws.readyState === WebSocket.OPEN) {
                const payload = {
                    type: "force_check_progress",
                    data: {
                        host_id: HOST_ID,
                        module: service
                    }
                };

                ws.send(JSON.stringify(payload));
            }
        }

    function connect(service) {
            console.log('start');
            ws = new WebSocket("{{ ws_url }}?token={{ access_token }}");

            ws.onopen = function() {
                sendPing(service);
                pingInterval = setInterval(sendPing, 5000, service);
            };

            ws.onmessage = function(e) {

                try {
                    const data = JSON.parse(e.data);

                    if (data.type === "error") {
                        ws.close(1000, "Closed by server status");
                        console.log(data.data);
                    }
                    if (data.data.status === "finished") {
                        ws.close(1000, "Process finished");
                        console.log('Process finished');

                        jQuery('#module-rescan').removeClass('wtotem_rotation').removeAttr('disabled');

                        jQuery.post(ajaxurl, {
                            action: 'wtotem_ajax',
                            ajax_action: 'get_module_data',
                            wtotem_page_nonce: '{{ page_nonce }}',
                            service: service,
                        }, function (response) {
                            var data = JSON.parse(response);
                            jQuery('#wtotem_notifications').html(data.notifications);
                            jQuery('#tabs-content-' + service).html(data.content);
                        });
                    }

                } catch(err) {
                    console.log("Error: " + err);
                    jQuery('#module-rescan').removeClass('wtotem_rotation').removeAttr('disabled');
                }
            };

            ws.onclose = function(e) {
                clearInterval(pingInterval);
            };

            ws.onerror = function(err) {
                console.log("Error: " + err);
            };
        }

    jQuery('.wtotem_body').on('click', '#module-rescan', function (e) {
            let start_scan_btn = jQuery(this);

            start_scan_btn.addClass('wtotem_rotation');
            start_scan_btn.attr('disabled', 'disabled');
            let service = start_scan_btn.attr('data-value');

            setTimeout(connect, 2000, service);

            jQuery.post(ajaxurl, {
                action: 'wtotem_ajax',
                ajax_action: 'force_check',
                wtotem_page_nonce: '{{ page_nonce }}',
                service: service,
            }, function (response) {
                var data = JSON.parse(response);
                // jQuery('#wtotem_notifications').html(data.notifications);

            });

        });


        jQuery('.wtotem_body').on('click', '.force_check', function (event) {

            event.preventDefault();
            let service = jQuery(this).data('service'),
                btn = jQuery(this);

            btn.find('img').addClass('wtotem_unit__img_spinner');

            jQuery.post(ajaxurl, {
                action: 'wtotem_ajax',
                ajax_action: 'force_check',
                wtotem_page_nonce: '{{ page_nonce }}',
                service: service,

            }, function (data) {

                btn.find('img').removeClass('wtotem_unit__img_spinner');
                if(service === 'ssl'){
                    jQuery('#ssl_data_wrap').html(data.content);
                } else if(service === 'dec'){
                    jQuery('#domain_data_wrap').html(data.content);
                } else if(service === 'rc'){
                    jQuery('#reputation_data_wrap').html(data.content);
                }

            });
        });

    });


</script>
<div class="wtotem_monitoring" id="monitoring">
    <div class="wtotem_table wt_card">
        <div class="wtotem_table__row">
            <div class="wtotem_table__col" {% if domain_module == false %}style="width: 50%"{% endif %}>
                <div class="wtotem_table__th">
                    <h3 class="h3 wtotem_table__title wtotem_title-info__title">
                        SSL
                        <span class="wtotem_title-info__info wtotem-tooltip wtotem-tooltip-top" data-service="SSL module">
                            <span class="wtotem-tooltip__content">
                                <span class="wtotem-tooltip__header">{{ 'SSL module'|trans }}</span>
                                <span class="wtotem-tooltip__text">{{ 'Displays the status of the SSL Certificate.'|trans }}</span>
                            </span>
                        </span>
                    </h3>
                    <button class="open-path__force-check-btn force_check" data-service="ssl" title="{{ 'ForceCheck'|trans }}">
                        <img width="18px" height="18px" src="{{ images_path }}recheck.svg" class="svg-icon">
                    </button>
                </div>

                <div id="ssl_data_wrap">
                    {% include 'monitoring_ssl.html.twig' with {'ssl': ssl } %}
                </div>

            </div>

            {% if domain_module != false %}
            <div class="wtotem_table__col">
                <div class="wtotem_table__th">
                    <h3 class="h3 wtotem_table__title wtotem_title-info__title">
                        {{ 'Availability'|trans }}
                    </h3>

                    <button class="open-path__force-check-btn force_check" data-service="availability" title="{{ 'ForceCheck'|trans }}">
                        <img width="18px" height="18px" src="{{ images_path }}recheck.svg" class="svg-icon">
                    </button>
                </div>

                <div id="domain_data_wrap">
                    {% include 'monitoring_domain.html.twig' with {'domain': domain_module, 'availability': availability } %}
                </div>

            </div>
            {% endif %}

            <div class="wtotem_table__col" {% if domain_module == false %}style="width: 50%"{% endif %}>
                <div class="wtotem_table__th">
                    <h3 class="h3 wtotem_table__title wtotem_title-info__title">{{ 'Reputation'|trans }}
                        <div class="h3 wtotem_title-info__info wtotem-tooltip wtotem-tooltip-top" data-service="Reputation module">
                            <div class="wtotem-tooltip__content">
                                <p class="wtotem-tooltip__header">{{ 'Reputation module'|trans }}</p>
                                <p class="wtotem-tooltip__text">{{ 'Checks website entries in 60+ blacklisting authorities.'|trans }}</p>
                            </div>
                        </div>
                    </h3>

                    <button class="open-path__force-check-btn force_check" data-service="rc" title="{{ 'ForceCheck'|trans }}">
                        <img width="18px" height="18px" src="{{ images_path }}recheck.svg" class="svg-icon">
                    </button>
                </div>

                <div id="reputation_data_wrap">
                    {% include 'monitoring_reputation.html.twig' with {'reputation': reputation } %}
                </div>

            </div>
        </div>
        <div class="wtotem_table__footer">
            <a target="_blank" href="https://wtotem.com/faq/#hs-chat-open" class="wtotem_table__link open_support_dialog" data-service="Monitoring">
                <div class="wtotem_table__perfomance">
                    <span>{{ 'Need more support?'|trans }} {{ 'Let\'s talk!'|trans }}</span>
                </div>
            </a>
        </div>
    </div>
</div>
