import { Component,  ViewChild, OnInit, ElementRef } from '@angular/core';
import { UserService } from '../core/services/user.service';
import { Router } from '@angular/router';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, BaseChartDirective, Label } from 'ng2-charts';
import * as pluginAnnotations from 'chartjs-plugin-annotation';
import * as io from 'socket.io-client';
import * as moment from 'moment';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-status',
  templateUrl: './status.component.html',
  styleUrls: ['./status.component.css']
})
export class StatusComponent implements OnInit {
  @ViewChild('dataContainer') dataContainer: ElementRef;
  public lineChartData = [
    { data: [], label: 'Cache' },
    { data: [], label: 'Network Status' },
    { data: [], label: 'Memory Usage', yAxisID: 'y-axis-1' }
  ];
  public anil = {
    "StatusCode": 200,
    "Message": "Success",
    "Response": {
      "PageContent": "\r\n<style>\r\n    iframe {\r\n        display: block;\r\n        margin: 0 auto;\r\n    }\r\n</style>\r\n\r\n<div class=\"embed-responsive embed-responsive-16by9\">\r\n    <iframe id=\"payment-form-iframe\" name=\"payment-form-iframe\" class=\"embed-responsive-item\" frameborder=\"0\" style=\"overflow: hidden; height: 500px; width: 100%; position: absolute;\"></iframe>\r\n</div>\r\n<form action=\"https://demo.globalgatewaye4.firstdata.com/payment\" method=\"post\" target=\"payment-form-iframe\" id=\"payment-form\">\r\n    <input name=\"x_login\" value=\"WSP-BUILD-35EIHAB7wQ\" type=\"hidden\">\r\n    <input name=\"x_amount\" value=\"100\" type=\"hidden\">\r\n    <input name=\"x_fp_sequence\" value=\"94c485b4-4c17-41ed-a9fb-0ba2581c9522\" type=\"hidden\">\r\n    <input name=\"x_fp_timestamp\" value=\"1561366475\" type=\"hidden\">\r\n    <input name=\"x_fp_hash\" value=\"bdaaece564f0b3ce86f00550aeeac629e5b578ec\" type=\"hidden\">\r\n    <input name=\"x_currency_code\" value=\"USD\" type=\"hidden\">\r\n    <input name=\"x_show_form\" value=\"PAYMENT_FORM\" type=\"hidden\">\r\n    <input name=\"x_relay_response\" value=\"TRUE\" type=\"hidden\">\r\n    <input name=\"x_relay_url\" value=\"https://paytestapi.azurewebsites.net/Payment/PaymentResponse\" type=\"hidden\">\r\n</form>\r\n\r\n<script>\r\n    (function () {\r\n        var form = document.getElementById(\"payment-form\");\r\n        form.submit();\r\n    })();\r\n</script>\r\n\r\n"
      }
    }
  public lineChartLabels: Label[] = [];
  public lineChartOptions: (ChartOptions & { annotation: any }) = {
    responsive: true,
    scales: {
      // We use this empty structure as a placeholder for dynamic theming.
      xAxes: [{}],
      yAxes: [
        {
          id: 'y-axis-0',
          position: 'left',
        },
        {
          id: 'y-axis-1',
          position: 'right',
          gridLines: {
            color: 'rgba(255,0,0,0.3)',
          },
          ticks: {
            fontColor: 'red',
          }
        }
      ]
    },
    annotation: {
      annotations: [
        {
          type: 'line',
          mode: 'vertical',
          scaleID: 'x-axis-0',
          value: 'March',
          borderColor: 'orange',
          borderWidth: 2,
          label: {
            enabled: true,
            fontColor: 'orange',
            content: 'LineAnno'
          }
        },
      ],
    },
  };
  public lineChartColors: Color[] = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // red
      backgroundColor: 'rgba(255,0,0,0.3)',
      borderColor: 'red',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];
  public lineChartLegend = true;
  public lineChartType = 'line';
  public lineChartPlugins = [pluginAnnotations];
  public data: Array<any> = [];
  html: string;
  constructor(
    private router: Router,
    private user: UserService,
    private toastr: ToastrService,
    
  ) {
  }

  ngOnInit() {
    this.html = this.anil.Response.PageContent.replace('/n', '')
    this.dataContainer.nativeElement.innerHTML = this.html;
  }
}