/**
 * 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";
import { call } from "../../../client_server";
import { nameStyle } from "./LightStyle";
import { iconStyle } from "./styleComponents";
import { Image } from "semantic-ui-react";

export default class Sensor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
      motion: false,
    };
    this.units = "";
    this.stateCallback = (e) => {
      this.setState(Object.assign(this.state, e));
    };

    this.iconOn = "/img/lightOn.svg";
    this.iconOff = "/img/lightOff.svg";

    call.socketSubscribe(this.props.device.id, this.stateCallback);
  }

  componentWillUnmount() {
    call.socketUnsubscribe(this.props.device.id, this.stateCallback);
  }

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

  componentDidMount() {
    if (this.props.device.kind === "sensor") {
      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,
      });
    } else {
      this.setState({
        detected: this.props.device.detected,
        motion: true,
      });
    }
  }

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

  render() {
    return (
      <StyledDiv>
        <Settings
          deviceId={this.props.device.id}
          edit={this.props.edit}
          onChangeData={(id, newSettings) =>
            this.props.onChangeData(id, newSettings)
          }
        />
        {this.state.motion ? (
          <div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
            <Image src={this.getIcon()} style={iconStyle} />
            <h5 style={nameStyle}>Motion Sensor</h5>
          </div>
        ) : (
          <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 + "e+2") + "e-2")}
              {this.units}
            </text>
            <text
              style={sensorText}
              x={100}
              y={150}
              textAnchor="middle"
              dy="0.3em"
              fontWeight="bold"
            >
              {this.setName()}
            </text>
          </CircularInput>
        )}
      </StyledDiv>
    );
  }
}