/*
 * Copyright (C) 2020 Robert Bosch GmbH Copyright (C) 2020 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { Component, OnInit } from '@angular/core';
import { BOSCH_DDS_COLORS } from '@bci-web-core/core';
import { ChartOptions } from 'chart.js';
import {enGB} from 'date-fns/locale';
import { BciChartData } from '@bci-web-core/charts';

@Component({
  selector: 'bci-chartjs-demo',
  templateUrl: './chartjs-demo.component.html',
  styleUrls: ['./chartjs-demo.component.scss'],
})
export class ChartjsDemoComponent implements OnInit {
  chartData: BciChartData;
  timeChartData: BciChartData;
  lineChartOptions: ChartOptions;
  timeLineChartOptions: ChartOptions;

  ngOnInit(): void {
    setTimeout(() => {
      this.generateChartData();
    }, 2000);

    this.lineChartOptions = {
      scales: {
        x:
          {
            display: true,
            title: {
              display: true,
              text: 'Month'
            }
          },
        y:
          {
            display: true,
            title: {
              display: true,
              text: 'Value',
            },
          },
      },
    };
    this.timeLineChartOptions = {
      plugins: {
        tooltip: {
          mode: 'point'
        }
      },
      scales: {
          x:
            {
              type: 'time',
              time: {
                unit: 'minute',
              },
              adapters: {
                date: {
                  locale: enGB
                },
              },
              title: {
                display: true,
                text: 'Time',
              }
            },
        y:
          {
            display: true,
            title: {
              display: true,
              text: 'Value',
            },
          },
      },
    };
  }

  generateChartData() {
    this.chartData = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Dataset 1',
          backgroundColor: BOSCH_DDS_COLORS.boschBlue50,
          borderColor: BOSCH_DDS_COLORS.boschBlue50,
          barPercentage: 0.25,
          fill: false,
          tension: 0.5,
          data: [
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
          ],
        },
        {
          label: 'Dataset 2',
          backgroundColor: BOSCH_DDS_COLORS.boschPurple50,
          borderColor: BOSCH_DDS_COLORS.boschPurple50,
          fill: false,
          barPercentage: 0.25,
          tension: 0.5,
          data: [
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
            Math.random() * 2000 - 1000,
          ],
        },
      ],

    };
    this.timeChartData = {
      datasets: [
        {
          label: 'Time Dataset 1',
          backgroundColor: BOSCH_DDS_COLORS.boschBlue50,
          borderColor: BOSCH_DDS_COLORS.boschBlue50,
          barPercentage: 0.25,
          fill: false,
          tension: 0.5,
          data: [
            {x: '2021-11-07 09:00:28', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:01:28', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:02:28', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:03:28', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:04:28', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:05:28', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:06:28', y:  Math.random() * 2000 - 1000}
          ],
        },
        {
          label: 'Time Dataset 2',
          backgroundColor: BOSCH_DDS_COLORS.boschPurple50,
          borderColor: BOSCH_DDS_COLORS.boschPurple50,
          fill: false,
          barPercentage: 0.25,
          tension: 0.5,
          data: [
            {x: '2021-11-07 09:00:54', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:01:54', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:02:54', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:03:54', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:04:54', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:05:54', y:  Math.random() * 2000 - 1000},
            {x: '2021-11-07 09:06:54', y:  Math.random() * 2000 - 1000}
          ],
        },
      ],
    }
  }
}
