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

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

    const labels = ["EV\/EBITDA","P\/E","P\/B","P\/S","P\/FCF","Current price"];
    const seriesNames = ["Implied share price","Implied share price","Implied share price","Implied share price","Implied share price","Current share price"];
    const impliedSharePrices =
        [28.86091076290438905971313943155109882354736328125,8.92412329852492547388465027324855327606201171875,34.25344022072101068943084101192653179168701171875,27.45003046171971305966508225537836551666259765625,8.758697485144995908967757713980972766876220703125,304.6181000000000267391442321240901947021484375];

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

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

    const barColors = seriesNames.map(function (series) {
        if (series === 'Current share price') {
            return '#ef6f6c';
        }

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

    const hoverColors = seriesNames.map(function (series) {
        if (series === 'Current share price') {
            return '#ef6f6c';
        }

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

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

        data: {
            labels: labels,

            datasets: [{
                label: 'Share price',
                data: impliedSharePrices,
                backgroundColor: barColors,
                hoverBackgroundColor: hoverColors,
                borderWidth: 0,
                borderRadius: 4,
                borderSkipped: false
            }]
        },

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

            plugins: {
                title: {
                    display: false
                },

                legend: {
                    display: false
                },

                tooltip: {
                    enabled: true,

                    callbacks: {
                        title: function (tooltipItems) {
                            return tooltipItems[0].label;
                        },

                        label: function (context) {
                            const index = context.dataIndex;
                            const series = seriesNames[index];
                            const value = context.parsed.x;

                            if (series === 'Current share price') {
                                return (
                                    'Current share price: $' +
                                    value.toFixed(2)
                                );
                            }

                            return (
                                'Implied share price: $' +
                                value.toFixed(2)
                            );
                        }
                    }
                }
            },

            scales: {
                x: {
                    beginAtZero: true,

                    grid: {
                        color: '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";
            }
        }]
    });
});