(function() {
  const html = document.querySelector('html');
  const academicaButton = document.getElementById('academica-button');
  const administrativaButton = document.getElementById('administrativa-button');
  const socialButton = document.getElementById('social-button');

  if (academicaButton && administrativaButton && socialButton) {
    const handlepaletteChanged = palette => {
      const oldPalette = html.getAttribute('paleta');

      html.dispatchEvent(
        new CustomEvent('paletteChanged', {
          detail: { palette, oldPalette },
        })
      );
    };

    academicaButton.addEventListener('click', () => {
      handlepaletteChanged('academica');
      window.closeDropdown(
        academicaButton.parentElement.parentElement.getElementsByClassName(
          'header__user'
        )[0]
      );
    });

    administrativaButton.addEventListener('click', () => {
      handlepaletteChanged('administrativa');
      window.closeDropdown(
        administrativaButton.parentElement.parentElement.getElementsByClassName(
          'header__user'
        )[0]
      );
    });

    socialButton.addEventListener('click', () => {
      handlepaletteChanged('social');
      window.closeDropdown(
        socialButton.parentElement.parentElement.getElementsByClassName(
          'header__user'
        )[0]
      );
    });
  }
})();

(function() {
  const column1 = document.getElementById('chart-column-1');

  if (column1) {
    const column1Context = column1.getContext('2d');

    new Chart(column1Context, {
      type: 'bar',
      data: {
        labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho'],
        datasets: [
          {
            label: 'Ocorrências',
            data: [5, 6, 7, 9, 11, 13],
          },
          {
            label: 'Divisões',
            data: [8, 9, 10, 12, 14, 16],
          },
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                suggestedMax: 18,
                beginAtZero: true,
              },
            },
          ],
        },
      },
    });
  }

  const column2 = document.getElementById('chart-column-2');

  if (column2) {
    const column2Context = column2.getContext('2d');

    new Chart(column2Context, {
      type: 'bar',
      data: {
        labels: [
          'Lorem ipsum',
          'Lorem ipsum dolor sit amet',
          'Lorem ipsum',
          'Lorem ipsum',
          'Lorem ipsum',
        ],
        datasets: [
          {
            label: 'Lorem',
            data: [5, 6, 7, 12, 16],
          },
          {
            label: 'Ipsum',
            data: [8, 9, 10, 8, 14],
          },
          {
            label: 'Dolor',
            data: [6, 8, 12, 14, 12],
          },
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                suggestedMax: 18,
                beginAtZero: true,
              },
            },
          ],
        },
      },
    });
  }

  const column3 = document.getElementById('chart-column-3');

  if (column3) {
    const column3Context = column3.getContext('2d');

    new Chart(column3Context, {
      type: 'bar',
      data: {
        labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho'],
        datasets: [
          {
            label: 'Ocorrências',
            data: [5, 6, 7, 9, 11, 13],
            backgroundColor: '#7CB6EC',
          },
          {
            label: 'Divisões',
            data: [8, 9, 10, 12, 14, 16],
            backgroundColor: '#4682B4',
          },
          {
            label: 'Teste',
            data: [1, 2, 3, 4, 5, 6],
            backgroundColor: '#2351a5',
          },
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                suggestedMax: 18,
                beginAtZero: true,
              },
            },
          ],
        },
      },
    });
  }

  const bar1 = document.getElementById('chart-bar-1');

  if (bar1) {
    const bar1Context = bar1.getContext('2d');

    new Chart(bar1Context, {
      type: 'horizontalBar',
      data: {
        labels: ['Lorem ipsum', 'Lorem ipsum dolor', 'Lorem ipsum'],
        datasets: [
          {
            label: 'Lorem',
            data: [5, 6, 7],
          },
          {
            label: 'Ipsum',
            data: [8, 9, 10],
          },
          {
            label: 'Dolor',
            data: [6, 8, 12],
          },
        ],
      },
      options: {
        scales: {
          xAxes: [
            {
              ticks: {
                suggestedMax: 14,
                beginAtZero: true,
              },
            },
          ],
        },
      },
    });
  }

  const pie1 = document.getElementById('chart-pie-1');

  if (pie1) {
    const pie1Context = pie1.getContext('2d');

    new Chart(pie1Context, {
      type: 'pie',
      data: {
        labels: [
          'Aprovado',
          'Aprovado por nota',
          'Reprovado',
          'Reprovado por falta',
        ],
        datasets: [
          {
            data: [65, 18, 12, 5],
          },
        ],
      },
      plugins: [ChartDataLabels],
    });
  }

  const line1 = document.getElementById('chart-line-1');

  if (line1) {
    const line1Context = line1.getContext('2d');

    new Chart(line1Context, {
      type: 'line',
      data: {
        labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho'],
        datasets: [
          {
            label: 'Umidade',
            data: [10, 12, 8, 6, 5, 2],
          },
          {
            label: 'Precipitação',
            data: [20, 22, 28, 25, 30, 32],
          },
        ],
      },
    });
  }

  const area1 = document.getElementById('chart-area-1');

  if (area1) {
    const area1Context = area1.getContext('2d');

    new Chart(area1Context, {
      type: 'area',
      data: {
        labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho'],
        datasets: [
          {
            label: 'Umidade',
            data: [10, 12, 8, 6, 5, 2],
          },
          {
            label: 'Precipitação',
            data: [20, 22, 28, 25, 30, 32],
          },
        ],
      },
    });
  }

  const radar1 = document.getElementById('chart-radar-1');

  if (radar1) {
    const radar1Context = radar1.getContext('2d');

    new Chart(radar1Context, {
      type: 'radar',
      data: {
        labels: ['Desenhar', 'Correr', 'Jogar', 'Dormir'],
        datasets: [
          {
            label: 'Horas',
            data: [6, 3, 3, 5],
          },
        ],
      },
      options: {
        scale: {
          ticks: {
            beginAtZero: true,
          },
        },
      },
    });
  }
})();