import { Component, OnInit } from "@angular/core";
import { StatusService } from "../shared/status/status.service";
import { Observable } from "rxjs";
import { Time } from "@angular/common";
import { Chart } from "chart.js";

@Component({
  selector: "app-status-list",
  templateUrl: "./status-list.component.html",
  styleUrls: ["./status-list.component.less"]
})
export class StatusListComponent implements OnInit {
  //statuses: {} = {};
  //statusesKeys = Object.keys(this.statuses);
  LineChart = [];
  BarChart = [];

  devices = [];
  activeDevice = { name: "", lastStatus: "", ip: "", _id: "" };

  time = 0;

  ngOnInit() {
    this.statusService.getDB().subscribe(data => {
      this.devices = data;
      this.activeDevice = this.devices[0];
      this.statusService.getStatus(this.activeDevice._id).subscribe(status => {
        const index = status.findIndex(item => {
          return item.value != status[0].value;
        });
        const newStatus = status.splice(0, index);
        const first = new Date(newStatus[0].time).getTime();
        const last = new Date(newStatus[newStatus.length - 1].time).getTime();
        const time = first - last;
        this.time = time / 1000;
        console.log(time);
      });
    });
    setInterval(
      () =>
        this.statusService.getDB().subscribe(data => {
          this.devices = data;
        }),
      1000
    );

    this.showChart();
  }

  showChart() {
    this.LineChart = new Chart("lineChart", {
      type: "line",
      data: {
        labels: ["8:00", "10:00", "12:00", "14:00", "16:00"],
        datasets: [
          {
            label: "Ruch w ciągu dnia",
            data: [6, 7, 8, 5, 4],
            fill: false,
            lineTension: 0.2,
            borderColor: "rgba(75,192,192,0.6)",
            borderWidth: 1
          }
        ]
      },
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true
            }
          }
        ]
      }
    });

    this.BarChart = new Chart("barChart", {
      type: "bar",
      data: {
        labels: ["Jan", "Feb", "March", "Apr", "May"],
        datasets: [
          {
            label: "Rozegranych gier",
            data: [60, 70, 80, 50, 40],
            fill: true,
            lineTension: 0.2,
            borderColor: "white",
            borderWidth: 1,
            backgroundColor: [
              "rgba(255,99,132,0.6)",
              "rgba(54,162,235,0.6)",
              "rgba(255,206,86,0.6)",
              "rgba(75,192,192,0.6)",
              "rgba(153,102,255,0.6)"
            ]
          }
        ]
      },
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true
            }
          }
        ]
      }
    });
  }

  constructor(private statusService: StatusService) {}

  readSensors = data => {
    console.log(data);
    //const parsedData = data.split(",");
    //this.statuses = { ...this.statuses, [parsedData[0]]: parsedData[1] };
    //this.statusesKeys = Object.keys(this.statuses);
    //this.statuses = [JSON.parse(data)];
  };
}