import React from "react";
import FusionCharts from "fusioncharts";
import TimeSeries from "fusioncharts/fusioncharts.timeseries";
import ReactFC from "react-fusioncharts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import GammelTheme from "fusioncharts/themes/fusioncharts.theme.gammel";
import CandyTheme from "fusioncharts/themes/fusioncharts.theme.candy";
import ZuneTheme from "fusioncharts/themes/fusioncharts.theme.zune";
import OceanTheme from "fusioncharts/themes/fusioncharts.theme.ocean";
import CarbonTheme from "fusioncharts/themes/fusioncharts.theme.carbon";
import UmberTheme from "fusioncharts/themes/fusioncharts.theme.umber";
import PowerCharts from "fusioncharts/fusioncharts.powercharts";
import ExcelExport from "fusioncharts/fusioncharts.excelexport";

ReactFC.fcRoot(
  FusionCharts,
  TimeSeries,
  PowerCharts,
  ExcelExport,
  TimeSeries,
  FusionTheme,
  GammelTheme,
  CandyTheme,
  ZuneTheme,
  OceanTheme,
  CarbonTheme,
  UmberTheme,
);
// const fetch = require("node-fetch");
// const jsonify = (res) => res.json();
// const dataFetch = [
//   ["01/05/20 06:00", "Actual", 1115],
//   ["01/05/20 06:00", "Estimate", 3235],
//   ["01/05/20 06:00", "Prediction", 5478],
//   ["01/05/20 07:00", "Actual", 1248],
//   ["01/05/20 07:00", "Prediction", 5356],
//   ["01/05/20 07:00", "Estimate", 3138],
//   ["01/05/20 07:00", "Estimate", 3335],
//   ["01/05/20 08:00", "Actual", 1129],
//   ["01/05/20 08:00", "Estimate", 2464],
//   ["01/05/20 08:00", "Prediction", 5403],
//   ["01/05/20 09:00", "Actual", 1045],
//   ["01/05/20 09:00", "Estimate", 3015],
//   ["01/05/20 09:00", "Prediction", 5348],
// ];

const formatNumber = (x) => JSON.stringify(x).slice();

const rows = [["Meninggal", "20200629", 10000.745, "10.000,745"]];

// format: "%d-%b-%y",
// "%d/%m/%y %H:%M"
const schemaFetch = [
  {
    name: "Type",
    type: "string",
  },
  {
    name: "Time",
    type: "date",
    format: "%Y%m%d",
  },
  {
    name: "Positive",
    type: "number",
  },
  {
    name: "PositiveD",
    type: "string",
  },
];

const dataSource = {
  chart: {
    theme: "candy",
    formatNumber: "1",
    formatNumberScale: "0",
    forceDecimals: "1",
    forceYAxisValueDecimals: "1",
    forceXAxisValueDecimals: "1",
    decimalSeparator: ",",
    thousandSeparator: ".",
    thousandSeparatorPosition: "2,3",
    paletteColors: "#52c41a,#1890ff,#fa8c16,#f5222d",
    exportEnabled: 1,
    exportFileName: "batchExport",
    exportFormat: "jpg",
    exportAtClientSide: 1,
  },
  caption: {
    text: "Covid 19 Indonesia",
  },
  subcaption: {
    text: "Data from https://data.kemkes.go.id/covid19/index.html",
  },
  series: "Type",
  yAxis: [
    {
      plot: "Positive",
      title: "Jiwa",
      format: {
        defaultFormat: 0,
      },
    },
    {
      plot: "PositiveD",
      title: "PositiveD",
      format: {
        // defaultFormat: 0,
      },
    },
  ],
  xAxis: {
    binning: {
      year: [],
      month: [],
      day: [],
      hour: [],
      minute: [],
      second: [],
      millisecond: [],
    },
  },
  tooltip: {
    enabled: true,
    toolText: `xxx : <div id='fxd3'>$series.0.dataValue</div> <br> <b>$bin</b><br> Konfirmasi Baru: $series.0.dataValue<br>Sembuh: <b>$series.1.dataValue</b> <br> Meninggal: <b>$series.2.dataValue</b>`,
  },
};

class TimseriesFushionChart extends React.Component {
  constructor(props) {
    super(props);
    this.onFetchData = this.onFetchData.bind(this);
    this.exportChart = this.exportChart.bind(this);
    this.state = {
      timeseriesDs: {
        id: "chart1", //ID chart must be exact same with function 'exportChart'
        type: "timeseries",
        renderAt: "container",
        width: "100%",
        height: "100%",
        dataSource,
        events: {
          dataPlotRollOver: function (e) {
            console.log(e.data.binValue);
            let x = e.data.binValue;
            var infoElem = document.getElementById("fxd3");
            if (infoElem) {
              infoElem.innerHTML = x.toLocaleString("id-ID", {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              });

              console.log(infoElem.innerHTML);
            }
          },
          dataPlotRollOut: function (e) {
            console.log(e.data.binValue);
            let x = e.data.binValue;
            var infoElem = document.getElementById("fxd3");
            if (infoElem) {
              infoElem.innerHTML = x.toLocaleString("id-ID", {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              });

              console.log(infoElem.innerHTML);
            }
          },
        },
      },
      timeseriesDs1: {
        id: "chart2", //ID chart must be exact same with function 'exportChart'
        type: "timeseries",
        renderAt: "container",
        width: "100%",
        height: "100%",
        dataSource,
      },
    };
  }

  componentDidMount() {
    this.onFetchData();
  }

  onFetchData() {
    Promise.all([rows, schemaFetch]).then((res) => {
      const data = res[0];
      const schema = res[1];
      console.log(JSON.stringify(data));
      console.log(JSON.stringify(schema));
      const fusionTable = new FusionCharts.DataStore().createDataTable(
        data,
        schema,
      );
      console.log(fusionTable);
      const timeseriesDs = Object.assign({}, this.state.timeseriesDs);
      timeseriesDs.dataSource.data = fusionTable;
      this.setState({
        timeseriesDs,
      });

      console.log(this.state.timeseriesDs);
    });
  }

  // Handler for export button.
  // Fires an export operation which exports all charts on the page as a PDF.
  // http://jsfiddle.net/fusioncharts/vga0prev/
  exportChart(e) {
    FusionCharts.batchExport({
      charts: [
        {
          id: "chart1",
        },
        {
          id: "chart2",
        },
      ],
      exportFileName: "batchExport",
      exportFormat: "pdf", //pdf,png,jpg
      exportAtClientSide: "1",
      exportMode: "auto",
    });
  }

  render() {
    return (
      <div style={{ margin: "0.5em", height: "60vh" }}>
        {this.state.timeseriesDs.dataSource.data ? (
          <>
            <center>
              <button className='button' onClick={this.exportChart}>
                Export both charts as a single PDF
              </button>
            </center>
            <ReactFC {...this.state.timeseriesDs} />
            <ReactFC {...this.state.timeseriesDs1} />
          </>
        ) : (
          "loading"
        )}
      </div>
    );
  }
}

export default TimseriesFushionChart;