// Change background image depending on budget balance
document.addEventListener('DOMContentLoaded', function() {
    let budget = document.getElementById('budget').innerHTML.split('$').pop();
    if (parseFloat(budget) <= 0) {
        document.getElementById('dollar').setAttribute('src', '/static/red_dollar.jpg');
    } else {
        document.getElementById('dollar').setAttribute('src', '/static/green_dollar.jpg');
    }
});

// https://www.chartjs.org/docs/latest/
// https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html
let context, labels, colors, data, source;
//Pie chart settings
context = document.getElementById('piechart').getContext('2d');
labels = [
    'Rent & Bills',
    'Maintenance',
    'Food',
    'Family',
    'Pets',
    'Clothes',
    'Hobbies & Entertainment',
    'Investing',
    'Other'
];

colors = [
    '#f75a3a',
    '#1288da',
    '#ffc300',
    '#ffe7b0',
    '#f39ad9',
    '#6dc9ff',
    '#ffc31d',
    '#71e748',
    '#b10981'
];

// Getting the data from hidden HTML div
data = [];
source = document.getElementById('hidden_data').getElementsByTagName('p');
for (let i = 0; i < source.length; i++) {
    data.push(source[i].innerHTML);
}


// Pie chart
let myPie = new Chart(context, {
    type: 'pie',
    data: {
        labels: labels,
        datasets: [{
            data: data,
            backgroundColor: colors
        }]
    },
    options: {
        plugins: {
          datalabels: {
              borderColor: '#000',
              color: 'black',
              align: 'start',
              font: {
                  weight: 'bold',
                  size: '14'
              },
              formatter: (value) => {
                  return '$ ' + value;
              }
          },
          legend: {
            position: 'right',
            align: 'center'
          },
          title: {
            display: false,
            text: "Title"
          }
        },
        responsive: true
    },
    plugins: [ChartDataLabels]
});