/**
 * Users can add sensors in their rooms.
 * Sensors typically measure physical quantities in a room.
 * You must support temperature sensors, humidity sensors, light sensors (which measure luminosity1).
 * Sensors have an internal state that cannot be changed by the user.
 * For this story, make the sensors return a constant value with some small random error.
 */

import React, {Component} from "react";
import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input";
import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle";
import Settings from "./DeviceSettings";
import {StyledDiv} from "./styleComponents";

export default class Sensor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      turnedOn: false,
      value: 20,
      error: 2.4
    };
    this.units = "ºC"
  }

  setName = () => {
    if (this.props.device.name.length > 15) {
      return this.props.device.name.slice(0, 12) + "..."
    }
    return this.props.device.name;
  };

  componentDidMount() {
  }


  render() {
    return (
      <StyledDiv>
        <Settings
          deviceId={this.props.device.id}
          edit={this.props.edit}
          onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>

        <CircularInput
          value={this.state.value / 100}
          style={style}
        >
          <CircularTrack/>
          <CircularProgress/>
          <text style={valueStyle} x={100} y={80} textAnchor="middle" dy="0.3em" fontWeight="bold">
            {Math.round(this.state.value)}{this.units}
          </text>
          <text style={errorStyle} x={100} y={100} textAnchor="middle" dy="0.6em" fontWeight="bold">
            &#177;{this.state.error}
          </text>
          <text style={sensorText} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
            {this.setName()}
          </text>
        </CircularInput>
      </StyledDiv>
    )
  }
}