import React, {useState} from "react";
import {
  CircularInput,
  CircularTrack,
  CircularProgress,
  CircularThumb,
  useCircularInputContext,
} from 'react-circular-input'


// Example of a custom component to display text on top of the thumb

function TemperatureDisplay() {
  const {getPointFromValue, value} = useCircularInputContext();
  const {x, y} = getPointFromValue();
  const style = {
    fontFamily: "Lato",
    fontSize: "1.2rem",
    color: "white",

  };

  return (
    <text x={x} y={y} style={style}>
      {Math.round(value * 100)}
    </text>
  )
}

export default function Sensor(props) {
  const style = {width: "10rem", height: "10rem", position: "absolute", top: "0", left: "0"};
  const valueStyle = {
    fill: "#3e99ff",
    fontSize: "2.5rem",
    fontFamily: "Lato",
    textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
  }

  const nameStyle = {
    fill: "#3e99ff",
    fontSize: "1.5rem",
    fontFamily: "Lato",
    textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
  }
  const [value, setValue] = useState(0.25);

  return (
    <CircularInput
      value={value}
      onChange={setValue}
      style={style}
    >
      <CircularTrack/>
      <CircularProgress/>
      <CircularThumb/>

      <text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold">
        {Math.round(value * props.device.maxValue)}{props.device.units}
      </text>
      <text style={nameStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
        {props.device.name}
      </text>
    </CircularInput>
  )
}