"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HtmlScriptsFunctions = void 0;
const chart_js_1 = require("chart.js");
class HtmlScriptsFunctions {
    // public centerNumber: string;
    constructor(suite) {
        this.document = {};
        this.dataFeatures = (suite) => ({
            datasets: [{
                    backgroundColor: [
                        '#228B22',
                        '#E74C3C',
                        '#b73122'
                    ],
                    data: [
                        suite.results.features.passed,
                        suite.results.features.failed,
                        suite.results.features.ambiguous
                    ],
                }],
            labels: [
                'Passed',
                'Failed',
                'Ambiguous'
            ]
        });
        this.dataScenarios = (suite) => ({
            datasets: [{
                    backgroundColor: [
                        '#228B22',
                        '#E74C3C',
                        '#FFD119',
                        '#3498DB',
                        '#b73122',
                        '#F39C12'
                    ],
                    data: [
                        suite.results.scenarios.passed,
                        suite.results.scenarios.failed,
                        suite.results.scenarios.pending,
                        suite.results.scenarios.skipped,
                        suite.results.scenarios.ambiguous,
                        suite.results.scenarios.undefined,
                    ]
                }],
            labels: [
                'Passed',
                'Failed',
                'Pending',
                'Skipped',
                'Ambiguous',
                'Undefined'
            ]
        });
        this.dataSteps = (suiteOrFeature) => ({
            datasets: [{
                    backgroundColor: [
                        '#228B22',
                        '#E74C3C',
                        '#FFD119',
                        '#3498DB',
                        '#b73122',
                        '#F39C12'
                    ],
                    data: [
                        suiteOrFeature.results.steps.passed,
                        suiteOrFeature.results.steps.failed,
                        suiteOrFeature.results.steps.pending,
                        suiteOrFeature.results.steps.skipped,
                        suiteOrFeature.results.steps.ambiguous,
                        suiteOrFeature.results.steps.undefined
                    ]
                }],
            labels: [
                'Passed',
                'Failed',
                'Pending',
                'Skipped',
                'Ambiguous',
                'Undefined'
            ]
        });
        this.graphOptions = () => ({
            // add numbers to donut pieces
            animation: {
                duration: 500,
                easing: 'easeOutQuart',
                onComplete() {
                    const ctx = this.chart?.ctx;
                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
                    ctx.font = chart_js_1.Chart.helpers.fontString(chart_js_1.Chart.defaults.global.defaultFontFamily, 'normal', chart_js_1.Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';
                    this.chart.height = 50;
                    this.chart.data.datasets.forEach((dataset) => {
                        for (let i = 0; i < dataset.data.length; i++) {
                            const model = this.chart.getDatasetMeta(0).data[i]._model;
                            const midRadius = model.innerRadius + (model.outerRadius - model.innerRadius) / 2;
                            const startAngle = model.startAngle;
                            const endAngle = model.endAngle;
                            const midAngle = startAngle + (endAngle - startAngle) / 2;
                            const x = midRadius * Math.cos(midAngle);
                            const y = midRadius * Math.sin(midAngle);
                            ctx.fillStyle = '#fff';
                            if (i === 3) { // Darker text color for lighter background
                                ctx.fillStyle = '#444';
                            }
                            // const percent = String( Math.round( dataset.data[i] / total * 100 ) ) + '%';
                            if (dataset.data[i] !== 0) {
                                ctx.fillText(dataset.data[i].toString(), model.x + x, model.y + y);
                            }
                            // Display percent in another line, line break doesn't work for fillText
                            /* if(percent != "0%" ){
                                        ctx.fillText(percent, model.x + x, model.y + y + 15);
                                        } */
                        }
                    });
                }
            },
            elements: {
                center: {
                    text: 'test'
                }
            },
            events: ['true'],
            legend: {
                display: false
            },
            maintainAspectRatio: true,
            responsive: false,
            showTooltips: true,
            title: {
                display: true,
                text: 'chart'
            },
            tooltips: {
                callbacks: {
                    label: (tooltipItem, data) => {
                        const dataset = data?.datasets[tooltipItem?.datasetIndex];
                        const total = dataset.data
                            .reduce((previousValue, currentValue) => previousValue + currentValue);
                        const current = dataset.data[tooltipItem.index];
                        const precentage = Math.floor(((current / total) * 100) + 0.5);
                        return `${precentage}  %`;
                    }
                }
            }
        });
        this.legendCallback = (chart) => {
            const data = chart.data;
            const datasets = data.datasets;
            // const labels = data.labels;
            // console.log(chart.id);
            const text = [];
            text.push(`<table class=' + 1 + '-legend">
          <thead class="pb-7"><tr>
                      <th colspan="2" style="color: rgb(83,83,83); padding-bottom: 1em;">Status</th>
                      <th colspan="1" style="color: rgb(83,83,83); padding-bottom: 1em;">Progress</th>
                      </tr></thead><tbody>`);
            for (let i = 0; i < chart.data.datasets[0].data.length; i++) {
                let labelIcon = null;
                switch (chart.data.labels[i]) {
                    case 'Passed':
                        labelIcon = 'mr-5 fas fa-check-circle passed-color';
                        break;
                    case 'Failed':
                        labelIcon = 'mr-5 fas fa-exclamation-circle failed-color';
                        break;
                    case 'Pending':
                        labelIcon = 'mr-5 fas fa-minus-circle';
                        break;
                    case 'Skipped':
                        labelIcon = 'mr-5 fas fa-arrow-circle-right';
                        break;
                    case 'Ambiguous':
                        labelIcon = 'mr-5 fas fa-bolt';
                        break;
                    case 'Undefined':
                        labelIcon = 'mr-5 fas fa-question-circle undefined-color';
                        break;
                }
                const labelStyle = `style= "background-color:${chart.data.datasets[0].backgroundColor[i]};color:white; "`;
                text.push(`<tr><td align="right"><i class=" ${labelIcon} "></i></td>`);
                text.push(`<td><span class="justify-content-begin" ${labelStyle} > ${chart.data.labels[i]} </span></td>`);
                text.push(`<td align="right"><span  >${datasets[0].data[i]} % </span></td></tr>`);
            }
            text.push('</tbody></table>');
            return text.join('');
        };
        // add numbers to donut pieces
        this.pluginBeforeDrawOptions = (chart) => {
            const width = chart.width;
            const height = chart.height;
            const ctx = chart.ctx;
            ctx.restore();
            // const centerConfig = chart.config.options.elements.center;
            // const fontStyle = centerConfig.fontStyle || 'Arial';
            // const txtvalue = centerConfig.text;
            // const color = centerConfig.color || '#000';
            // const maxFontSize = centerConfig.maxFontSize || 75;
            // const sidePadding = centerConfig.sidePadding || 20;
            // const sidePaddingCalculated = ( sidePadding / 100 ) * ( chart.innerRadius * 2 );
            const fontSize = (height / 114).toFixed(2);
            ctx.font = fontSize + 'em sans-serif';
            // ctx.font = "30px " + fontStyle;
            ctx.textBaseline = 'middle';
            const text = chart.config.options.elements.text;
            const textX = Math.round((width - ctx.measureText(text).width) / 2);
            const textY = (height + chart.chartArea.top) / 2;
            ctx.fillStyle = '#696969';
            ctx.fillText(text, textX, textY);
            ctx.save();
        };
        this.generateChart = (chartName, chartData, graphOptions, pluginBeforeDrawOptions, legendCallback, chartCenterValue) => {
            const canvas = document.getElementById(chartName);
            const ctx = canvas.getContext('2d');
            graphOptions.legendCallback = legendCallback;
            graphOptions.elements.text = chartCenterValue;
            chart_js_1.Chart.pluginService.register({
                beforeDraw: pluginBeforeDrawOptions
            });
            const chart = new chart_js_1.Chart(ctx, {
                data: chartData,
                options: graphOptions,
                type: 'doughnut'
                // tooltipFillColor: 'rgba(51, 51, 51, 0.55)',
            });
            document.getElementById(chartName + '-chart').innerHTML = chart.generateLegend().toString();
            document.getElementById(chartName + '-chart').className = 'd-flex flex-row mt-2 mr-0';
            return chart;
        };
        this.suite = suite;
    }
}
exports.HtmlScriptsFunctions = HtmlScriptsFunctions;
//# sourceMappingURL=HtmlChartsScriptsFunctions.js.map