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: "" };
  activeID = 0;
  time = 0;

  Math: any;

  ngOnInit() {
    this.statusService.getDB().subscribe(data => {
      this.devices = data;
      this.onChangeDevice(0);
    });
    setInterval(() => {
      this.statusService.getDB().subscribe(data => {
        this.devices = data;
        this.onChangeDevice(this.activeID);
      });
    }, 5000);

    this.showChart();
  }

  onChangeDevice = (index: number) => {
    this.activeID = index;

    this.activeDevice = this.devices[index];
    //console.log(this.activeDevice);
    this.statusService.getStatus(this.activeDevice._id).subscribe(status => {
      let i = status.findIndex(item => {
        return item.value != status[0].value;
      });
      //console.log(i);
      let newStatus;
      if (i == -1) {
        newStatus = status;
      } else {
        newStatus = status.splice(0, i);
      }
      const first = Date.now(); //new Date(newStatus[0].time).getTime();
      const last = new Date(newStatus[0].time).getTime(); //new Date(newStatus[newStatus.length - 1].time).getTime();
      const time = first - last;
      this.time = time / 1000;
      if (
        this.activeDevice.lastStatus == "0" &&
        this.time < 10 &&
        newStatus[1].value == "1"
      ) {
        this.activeDevice.lastStatus = "1";
      }
      console.log(this.time);
    });
  };

  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) {
    this.Math = Math;
  }

  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)];
  };
}