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("ws://elepsio.herokuapp.com/");
export default function Chart() {
  const theme = useTheme();
  
  useEffect(() => {
    ws.onopen = () => console.log("ws opened");

    // ws.close = () => console.log("ws closed");
    ws.onmessage = function (event) {
      setBarData({ data: [...barData.data, JSON.parse(event.data)] });
    };
    return () => {
      ws.close();
    };
  }, []);

  const [barData, setBarData] = useState({
    data: [
      {
        time: "18:02",
        pulse: 87,
      },
    ],
  });

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