"use strict";

import Chartist from "chartist";
import 'chartist-plugin-tooltips';

if(document.querySelector('#chart-сaptcha-activity')) {
    let chartCaptchaActivity = null;
    axios.get('/dashboard/chart-captcha-activity')
        .then(response => {
            chartCaptchaActivity = new Chartist.Line('#chart-сaptcha-activity', {
                labels: response.data.days,
                series: response.data.values,
            }, {
                low: 0,
                showArea: true,
                fullWidth: true,
                plugins: [
                    Chartist.plugins.tooltip()
                ],
                axisX: {
                    // On the x-axis start means top and end means bottom
                    position: 'end',
                    showGrid: true,
                },
                axisY: {
                    // On the y-axis start means left and end means right
                    showGrid: true,
                    showLabel: true,
                }
            });

            let currentDate = response.data.days[response.data.days.length - 1];

            window.websocket.add(function (echo) {
                echo.private('chart-captcha-activity')
                    .listen('CreatedCaptchaLog', (e) => {
                        let options = chartCaptchaActivity.data;

                        if (currentDate !== e.chartCaptchaActivity.date) {
                            currentDate = e.chartCaptchaActivity.date;

                            options['labels'].push(currentDate);
                            options['series'].forEach(function(series, i) {
                                series.push(response.data.types[i]);
                                options['series'].push(series);
                            });
                        }
                        let values = options['series'][e.chartCaptchaActivity['type'] - 1];
                        options['series'][e.chartCaptchaActivity['type'] - 1][values.length - 1]['value']++;
                        chartCaptchaActivity.update(options);

                        let captchaLog = document.querySelector('#captcha-log');
                        if (captchaLog) {
                            let tr = document.createElement("tr");
                            let link = '';
                            if (e.captchaLog.link !== '' && e.captchaLog.title !== '') {
                                link = `<a href="${e.captchaLog.link}">${e.captchaLog.title}</a>`;
                            }
                            tr.innerHTML = `
                                <td>${e.captchaLog.created_at}</td>
                                <td>
                                    ${link}
                                    <p><strong>${e.captchaLog.type}</strong></p>
                                </td>
                                <td>
                                    <p><strong>IP:</strong> ${e.captchaLog.ip}</p>
                                    <p><strong>User Agent:</strong> ${e.captchaLog.user_agent}</p>
                                    <p><strong>referer:</strong> ${e.captchaLog.referer}</p>
                                </td>
                            `;

                            captchaLog.prepend(tr);
                        }
                    });
            });
        })
        .catch(error => {

        });
}