import React, { Component } from "react";
import { Checkbox, Icon } from "semantic-ui-react";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
import "./Thermostat.css";
import Slider from "react-rangeslider";
import "react-rangeslider/lib/index.css";

import {
  stateTag,
  container,
  deviceName,
  targetTemperature,
  toggle,
  stateTagContainer,
} from "./ThermostatStyle";

class Thermostats extends Component {
  constructor(props) {
    super(props);
    this.state = {
      targetTemperature: this.props.device.targetTemperature,
      mode: this.props.device.mode,
      measuredTemperature: this.props.device.measuredTemperature,
      useExternalSensors: this.props.device.useExternalSensors,
    };
    console.log(this.state);
    this.setMode = this.setMode.bind(this);
    this.setTargetTemperature = this.setTargetTemperature.bind(this);
  }

  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.
    // Good job Jacob (Claudio)
    //this.mode = "HEATING";
    const turnOn = mode;
    console.log(turnOn);
    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, on: 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 },
        this.props.stateOrDevice.kind
      );
    }
  };

  saveTargetTemperature(targetTemperature) {
    const turn = this.props.stateOrDevice.mode !== "OFF";
    if (this.props.tab === "Devices") {
      this.props
        .saveDevice({
          ...this.props.stateOrDevice,
          targetTemperature,
          turnOn: turn,
        })
        .catch((err) => console.error("thermostat update error", err));
    } else {
      this.props.updateState(
        {
          id: this.props.stateOrDevice.id,
          targetTemperature: targetTemperature,
        },
        this.props.stateOrDevice.kind
      );
    }
  }

  setTargetTemperature() {
    this.saveTargetTemperature(this.state.targetTemperature);
  }

  handleChange = (value) => {
    this.setState({ ...this.state, targetTemperature: value });
  };

  render() {
    return (
      <div style={container}>
        <h3 style={deviceName}>
          Thermostat
          <Checkbox
            checked={
              this.props.tab === "Devices"
                ? this.props.device.mode !== "OFF"
                : this.props.stateOrDevice.on
            }
            slider
            style={toggle}
            onChange={(e, val) => this.setMode(val.checked)}
          />
        </h3>
        <hr />
        <div style={targetTemperature}>
          <Icon name="thermometer half" />{" "}
          {this.props.device.measuredTemperature} ºC <br />
          <Icon name="target" />{" "}
          {this.props.device.targetTemperature.toFixed(1)} ºC
        </div>
        {this.props.tab === "Devices" ? (
          <Slider
            min={10}
            max={30}
            step={0.1}
            tooltip={false}
            className="slider-css"
            value={this.state.targetTemperature}
            onChange={(event) => this.handleChange(event)}
            onChangeComplete={() => this.setTargetTemperature()}
          />
        ) : null}
        <div style={stateTagContainer}>
          <span style={stateTag}>
            {this.props.tab === "Devices"
              ? this.props.device.mode
              : this.props.stateOrDevice.on
              ? "WILL TURN ON"
              : "WILL TURN OFF"}
          </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];
    }
  },
  get device() {
    if (state.active.activeTab === "Devices") {
      return state.devices[ownProps.id];
    } else {
      return state.devices[state.sceneStates[ownProps.id].deviceId];
    }
  },
  activeTab: state.activeTab,
});

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