document.addEventListener('DOMContentLoaded', function () {
    const canvas = document.getElementById(
        'premiumDiscountToPeersChart'
    );

    if (!canvas || typeof Chart === 'undefined') {
        return;
    }

    const labels = ["EV\/EBITDA","P\/E","P\/B","P\/S","P\/FCF"];
    const premiumDiscountValues =
        [1165.23484739883451766218058764934539794921875,3313.4232552608345940825529396533966064453125,789.306586541712249527336098253726959228515625,1009.7186228073718439190997742116451263427734375,3377.89269485150225591496564447879791259765625];

    if (
        labels.length === 0 ||
        premiumDiscountValues.length === 0
    ) {
        return;
    }

    const ctx = canvas.getContext('2d');

    const barColors = premiumDiscountValues.map(function (value) {
        if (value >= 0) {
            return '#ef6f6c';
        }

        return 'rgba(255, 255, 255, 0.45)';
    });

    new Chart(ctx, {
        type: 'bar',

        data: {
            labels: labels,

            datasets: [{
                label: 'Premium / discount',
                data: premiumDiscountValues,
                backgroundColor: barColors,
                borderWidth: 0,
                borderRadius: 4,
                borderSkipped: false
            }]
        },

        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,

            plugins: {
                title: {
                    display: false
                },

                legend: {
                    display: false
                },

                tooltip: {
                    enabled: true,

                    callbacks: {
                        label: function (context) {
                            const value = context.parsed.x;

                            if (value >= 0) {
                                return value.toFixed(2) + '% premium';
                            }

                            return (
                                Math.abs(value).toFixed(2) +
                                '% discount'
                            );
                        }
                    }
                }
            },

            scales: {
                x: {
                    beginAtZero: true,

                    grid: {
                        color: function (context) {
                            if (context.tick.value === 0) {
                                return 'rgba(255, 255, 255, 0.5)';
                            }

                            return 'rgba(255, 255, 255, 0.08)';
                        }
                    },

                    border: {
                        display: false
                    },

                    ticks: {
                        color: 'rgba(255, 255, 255, 0.65)',

                        callback: function (value) {
                            return value + '%';
                        }
                    }
                },

                y: {
                    grid: {
                        display: false
                    },

                    border: {
                        display: false
                    },

                    ticks: {
                        color: 'rgba(255, 255, 255, 0.75)'
                    }
                }
            },

            layout: {
                padding: 10
            }
        },

        plugins: [{
            id: 'interFont',

            beforeInit: function () {
                Chart.defaults.font.family =
                    "'Inter', sans-serif";
            }
        }]
    });
});