$(window).on("load", function () {
    const connectOptions = {
        path: '/ws-counters/',
        transports: ['websocket', 'polling']
    };
    var agencyId = $('#session_agency_id').val();
    if (agencyId) {
        axios.post('/ajax/ajax_vue_wazzap.php', {
            request: 'get_counter_host',
            agency_id: agencyId,
        })
            .then((response) => {
                var host = response.data.host;
                var apiKey = response.data.key;
                var userId = $('#session_user_id').val();
                if (host && apiKey) {
                    // Подключаемся при помощи socket.io
                    const client = io(`https://${host}`, connectOptions);
                    // Слушаем событие 'connect'
                    client.on('connect', () => {
                        // Завершаем подключение: транслируем событие 'counterConnecting', в котором передаем данные клиента
                        client.emit('counterConnecting', {
                            type: 'api_v3',
                            apiKey,
                            userId
                        });
                    });
                    // Подтверждение подключения
                    client.on('counterConnected', () => console.log('Connected to Wazzup notifications!'));
                    // Обновление счетчика неотвеченных
                    client.on('counterUpdate', (data) => {
                        // используйте counter для работы через веб-сокеты
                        // или counterV2 + type для работы по новому механизму подсчета неотвеченных
                        // type может быть 'red' или 'grey', в случае если counterV2>0 или null, если counterV2 = 0
                        const { counter, counterV2, type  } = data;
                        if (counter > 0) {
                            document.getElementById('wazzapCounterHeader').innerHTML = counter;
                            $('#wazzapCounterHeader').show();
                        } else {
                            document.getElementById('wazzapCounterHeader').innerHTML = counter;
                            $('#wazzapCounterHeader').hide();
                        }
                    });
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }
});