import React, { Component } from "react";
import { Checkbox } from "semantic-ui-react";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
import "./Thermostat.css";
import {
  stateTag,
  container,
  deviceName,
  targetTemperature,
  slider,
  line,
  toggle,
  stateTagContainer,
} from "./ThermostatStyle";

//not quite working yet
class Thermostats extends Component {
  constructor(props) {
    super(props);
    this.state = {
      targetTemperature: this.props.stateOrDevice.targetTemperature,
      internalSensorTemperature: this.props.stateOrDevice
        .internalSensorTemperature,
      mode: this.props.stateOrDevice.mode,
      measuredTemperature: this.props.stateOrDevice.measuredTemperature,
      useExternalSensors: this.props.stateOrDevice.useExternalSensors,
      timeout: null,
    };
    this.setMode = this.setMode.bind(this);
    this.setTargetTemperature = this.setTargetTemperature.bind(this);
    this.setInternalSensorTemperature = this.setInternalSensorTemperature.bind(
      this
    );
  }

  //getters
  get getMode() {
    return this.props.stateOrDevice.mode;
  }

  get getTargetTemperature() {
    return this.props.stateOrDevice.targetTemperature;
  }

  get getInternalSensorTemperature() {
    return this.props.stateOrDevice.internalSensorTemperature;
  }

  get getMeasuredTemperature() {
    return this.props.stateOrDevice.measuredTemperature;
  }

  get getUseExternalSensors() {
    return this.props.stateOrDevice.useExternalSensors;
  }

  setMode(mode) {
    if (this.state.timeout) {
      clearTimeout(this.state.timeout);
    }
    console.log(mode);

    //i came to the conclusion that is not possible to set mode.
    //this.mode = "HEATING";
    const turnOn = mode;
    if (this.props.tab === "Devices") {
      this.props
        .saveDevice({ ...this.props.stateOrDevice, turnOn })
        .catch((err) => console.error("thermostat update error", err));
    } else {
      this.props.updateState(
        { id: this.props.stateOrDevice.id, turnOn: turnOn },
        this.props.stateOrDevice.kind
      );
    }
  }

  onClickDevice = () => {
    const on = !this.turnedOn;
    if (this.props.tab === "Devices") {
      this.props
        .saveDevice({ ...this.props.stateOrDevice, on })
        .catch((err) => console.error("thermostat update error", err));
    } else {
      this.props.updateState(
        { id: this.props.stateOrDevice.id, on: on },
        this.props.stateOrDevice.kind
      );
    }
  };

  //It seems to work
  saveTargetTemperature(targetTemperature) {
    if (this.props.tab === "Devices") {
      this.props
        .saveDevice({ ...this.props.stateOrDevice, targetTemperature })
        .catch((err) => console.error("thermostat update error", err));
    } else {
      this.props.updateState(
        {
          id: this.props.stateOrDevice.id,
          targetTemperature: targetTemperature,
        },
        this.props.stateOrDevice.kind
      );
    }
  }

  setTargetTemperature(newTemp) {
    if (this.state.timeout) {
      clearTimeout(this.state.timeout);
    }

    this.setState({
      newTemp,
      timeout: setTimeout(() => {
        this.saveTargetTemperature(newTemp);
        this.setState({
          targetTemperature: this.state.targetTemperature,
          timeout: null,
        });
      }, 100),
    });
  }

  //I have no idea why it doesn't want to update the temperature
  saveInternalSensorTemperature(internalSensorTemperature) {
    if (this.props.tab === "Devices") {
      this.props
        .saveDevice({ ...this.props.device, internalSensorTemperature })
        .catch((err) => console.error("thermostat update error", err));
    } else {
      this.props.updateState(
        {
          id: this.props.stateOrDevice.id,
          internalSensorTemperature: internalSensorTemperature,
        },
        this.props.stateOrDevice.kind
      );
    }
  }

  setInternalSensorTemperature(newTemp) {
    if (this.state.timeout) {
      clearTimeout(this.state.timeout);
    }

    this.setState({
      newTemp,
      timeout: setTimeout(() => {
        this.saveInternalSensorTemperature(newTemp);
        this.setState({
          internalSensorTemperature: this.state.internalSensorTemperature,
          timeout: null,
        });
      }, 100),
    });
  }

  helperMode = () => {
    //this.setMode("HEATING");
    this.setTargetTemperature(20);
    //this.setInternalSensorTemperature(42);
  };

  handleChange = (value) => {
    this.setTargetTemperature(value);
  };

  render() {
    return (
      <div style={container}>
        <h3 style={deviceName}>{this.props.stateOrDevice.name}</h3>
        <div style={line}></div>
        <Checkbox
          slider
          style={toggle}
          // TODO Manage the state hereconsole.log("CHANGE", val.checked)
          onChange={(e, val) => this.setMode(val.checked)}
        />

        <span style={targetTemperature}>
          {this.props.stateOrDevice.targetTemperature}ºC
        </span>
        <input
          type="range"
          min="0"
          max="40"
          className="slider-css"
          value={this.props.stateOrDevice.targetTemperature}
          onChange={(event) => this.handleChange(event.target.value)}
          id="targetTemperature"
        />
        <div style={stateTagContainer}>
          <span style={stateTag}>{this.props.stateOrDevice.mode}</span>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  get stateOrDevice() {
    if (state.active.activeTab === "Devices") {
      return state.devices[ownProps.id];
    } else {
      return state.sceneStates[ownProps.id];
    }
  },
});

const ThermostatContainer = connect(
  mapStateToProps,
  RemoteService
)(Thermostats);
export default ThermostatContainer;