import React, { useState, useEffect } from "react";
import { useTheme } from "@material-ui/core/styles";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  Label,
  ResponsiveContainer,
  Tooltip,
} from "recharts";
import Title from "./TittleNav";
// import { useForkRef } from "@material-ui/core";

let ws = new WebSocket("wss://elepsio.herokuapp.com/");
export default function Chart() {
  const theme = useTheme();

  useEffect(() => {
    ws.onopen = () => console.log("ws opened");
    ws.onclose = () => console.log("ws closed");

    return () => {
      ws.close();
    };
  }, []);

  const [barData, setBarData] = useState({
    data: [
      {
        time: "18:02",
        pulse: 87,
      },
    ],
  });
  ws.onmessage = function (event) {
    setBarData({ data: [...barData.data, JSON.parse(event.data)] });
  };
  console.log(barData);
  return (
    <React.Fragment>
      <Title>График</Title>
      <ResponsiveContainer>
        <LineChart
          data={barData.data}
          margin={{
            top: 16,
            right: 16,
            bottom: 0,
            left: 24,
          }}
        >
          <XAxis dataKey="time" stroke={theme.palette.text.secondary} />
          <YAxis stroke={theme.palette.text.secondary}>
            <Label
              angle={270}
              position="left"
              style={{ textAnchor: "middle", fill: theme.palette.text.primary }}
            >
              Пульс
            </Label>
          </YAxis>
          <Tooltip />
          <Line
            type="monotone"
            dataKey="pulse"
            stroke={theme.palette.primary.main}
            dot={false}
          />
        </LineChart>
      </ResponsiveContainer>
    </React.Fragment>
  );
}