/**
 * 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.
 */

 /*

  OPTIONAL STATE
  error: 2.4 
  
  <text style={errorStyle} x={100} y={100} textAnchor="middle" dy="0.6em" fontWeight="bold">
    &#177;{this.state.error}
  </text>


  errorStyle,
 */

import React, {Component} from "react";
import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input";
import { 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: 0,
    };
    this.units = ""
  }

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

  componentDidMount() {
    switch(this.props.device.sensor) {
      case "TEMPERATURE":
        this.units = "ºC";
        break;
      case "HUMIDITY" :
        this.units = "%";
        break;
      case "LIGHT":
        this.units = "lm";
        break;
      default:
        this.units = "";

    }
    this.setState({
      value : this.props.device.value
    });
  }


  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={sensorText} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
            {this.setName()}
          </text>
        </CircularInput>
      </StyledDiv>
    )
  }
}