import React from "react";
import ReactDOM from "react-dom/server";
import SvgSaver from "svgsaver";
import {
  VictoryAxis,
  VictoryChart,
  VictoryLabel,
  VictoryLine,
  VictoryScatter
} from "victory";
import { convertSecondsToFormattedTime } from "../../../../util/date-time";

const LoadChartComponent = ({ data, currentTick }) => {
  const onExport = () => {
    const div = document.createElement("div");
    div.innerHTML = ReactDOM.renderToString(
      <VictoryChartComponent
        data={data}
        currentTick={currentTick}
        showCurrentTick={false}
      />
    );
    div.firstChild.style =
      "font-family: Roboto, Arial, sans-serif; font-size: 10pt;";
    const svgSaver = new SvgSaver();
    svgSaver.asSvg(
      div.firstChild,
      "opendc-chart-export-" + Date.now() + ".svg"
    );
  };

  return (
    <div className="mt-1" style={{ position: "relative" }}>
      <strong>Load over time</strong>
      <VictoryChartComponent
        data={data}
        currentTick={currentTick}
        showCurrentTick={true}
      />
      <ExportChartComponent onExport={onExport} />
    </div>
  );
};

const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => (
  <VictoryChart
    height={250}
    padding={{ top: 10, bottom: 50, left: 50, right: 50 }}
  >
    <VictoryAxis
      tickFormat={tick => convertSecondsToFormattedTime(tick)}
      fixLabelOverlap={true}
      label="Simulated Time"
    />
    <VictoryAxis dependentAxis label="Load" />
    <VictoryLine data={data} />
    <VictoryScatter data={data} />
    {showCurrentTick ? (
      <VictoryLine
        labelComponent={
          <VictoryLabel renderInPortal angle={90} dy={-5} dx={60} />
        }
        data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]}
        labels={point =>
          point.y === 1
            ? "Current tick : " + convertSecondsToFormattedTime(currentTick)
            : ""}
        style={{
          data: { stroke: "#00A6D6", strokeWidth: 4 },
          labels: { fill: "#00A6D6" }
        }}
      />
    ) : (
      undefined
    )}
  </VictoryChart>
);

const ExportChartComponent = ({ onExport }) => (
  <button
    className="btn btn-success btn-circle btn-sm"
    title="Export Chart to PNG Image"
    onClick={onExport}
    style={{ position: "absolute", top: 0, right: 0 }}
  >
    <span className="fa fa-camera" />
  </button>
);

export default LoadChartComponent;