/**
 * 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 { StyledDiv } from "./styleComponents";
import Settings from "./DeviceSettings";
import { Image } from "semantic-ui-react";
import { imageStyle, nameStyle } from "./DigitalSensorStyle";

export default class DigitalSensor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: false, // This value is a boolean, was this type of sensor returns presence/absence
    };

    this.iconOn = "/img/sensorOn.svg";
    this.iconOff = "/img/sensorOff.svg";
  }

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

  getIcon = () => {
    if (this.state.value) {
      return this.iconOn;
    }
    return this.iconOff;
  };

  componentDidMount() {}

  render() {
    return (
      <StyledDiv>
        <Settings
          deviceId={this.props.device.id}
          edit={this.props.edit}
          onChangeData={(id, newSettings) =>
            this.props.onChangeData(id, newSettings)
          }
        />
        <Image src={this.getIcon()} style={imageStyle} />
        <h5 style={nameStyle}>{this.props.device.name}</h5>
      </StyledDiv>
    );
  }
}
