import React from "react";
import Light from "./Light";
import SmartPlug from "./SmartPlug";
import Sensor from "./Sensor";
import { ButtonDimmer, KnobDimmer } from "./Dimmer";
import Switcher from "./Switch";
import Videocam from "./Videocam";
import Curtains from "./Curtain";
import Thermostat from "./Thermostats";
import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
import DeviceSettingsModal from "./DeviceSettingsModal";

class Device extends React.Component {
  constructor(props) {
    super(props);

    this.modalRef = React.createRef();
    this.edit = this.edit.bind(this);
    this.resetSmartPlug = this.resetSmartPlug.bind(this);
  }

  edit() {
    console.log("editing device with id=" + this.props.id);
    this.modalRef.current.openModal();
  }

  resetSmartPlug() {
    this.props
      .smartPlugReset(this.props.id)
      .catch((err) => console.error(`Smart plug reset error`, err));
  }

  deleteState() {
    this.props.deleteState(this.props.id, this.props.type);
  }

  renderDeviceComponent() {
    console.log(JSON.stringify(this.props.stateOrDevice));
    switch (
      this.props.tab === "Devices"
        ? this.props.stateOrDevice.kind
        : this.props.type
    ) {
      case "curtains":
        return (
          <Curtains
            tab={this.props.tab}
            sceneState={this.props.sceneState}
            id={this.props.id}
          />
        );
      case "thermostat":
        return (
          <Thermostat
            tab={this.props.tab}
            sceneState={this.props.sceneStat}
            id={this.props.stateOrDevice.id}
          />
        );
      case "regularLight":
        return (
          <Light
            tab={this.props.tab}
            sceneState={this.props.sceneState}
            id={this.props.stateOrDevice.id}
          />
        );
      case "sensor":
        return (
          <Sensor
            tab={this.props.tab}
            sceneState={this.props.sceneState}
            id={this.props.stateOrDevice.id}
          />
        );
      case "motionSensor":
        return (
          <Sensor
            tab={this.props.tab}
            sceneState={this.props.sceneState}
            id={this.props.stateOrDevice.id}
          />
        );
      case "buttonDimmer":
        return (
          <ButtonDimmer
            tab={this.props.tab}
            sceneState={this.props.sceneState}
            id={this.props.stateOrDevice.id}
          />
        );
      case "knobDimmer":
        return (
          <KnobDimmer
            tab={this.props.tab}
            sceneState={this.props.sceneState}
            id={this.props.stateOrDevice.id}
          />
        );
      case "smartPlug":
        return (
          <SmartPlug
            tab={this.props.tab}
            sceneState={this.props.sceneState}
            id={this.props.stateOrDevice.id}
          />
        );
      case "switch":
        return (
          <Switcher
            tab={this.props.tab}
            sceneState={this.props.sceneState}
            id={this.props.stateOrDevice.id}
          />
        );
      case "dimmableLight":
        return (
          <Light
            id={this.props.stateOrDevice.id}
            sceneState={this.props.sceneState}
            tab={this.props.tab}
          />
        );
      case "securityCamera":
        return (
          <Videocam
            id={this.props.stateOrDevice.id}
            sceneState={this.props.sceneState}
            tab={this.props.tab}
          />
        );
      default:
        //throw new Error("Device type unknown");
        return undefined;
    }
  }

  render() {
    {
      if (this.props.type !== "") {
        return (
          <Segment>
            <Grid columns={2}>
              <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
              {this.props.tab === "Devices" ? (
                <Grid.Column textAlign="center">
                  <Header as="h3">{this.props.stateOrDevice.name}</Header>
                  <Button
                    color="blue"
                    icon
                    onClick={this.edit}
                    labelPosition="left"
                  >
                    <Icon name="pencil" />
                    Edit
                  </Button>
                  {this.props.stateOrDevice.kind === "smartPlug" ? (
                    <Button
                      color="orange"
                      icon
                      onClick={this.resetSmartPlug}
                      labelPosition="left"
                    >
                      <Icon name="undo" />
                      Reset
                    </Button>
                  ) : null}
                </Grid.Column>
              ) : (
                <Grid.Column textAlign="center">
                  <Header as="h3">
                    {this.props.stateOrDevice
                      ? this.props.stateOrDevice.name
                      : ""}
                  </Header>
                  <Button
                    color="red"
                    icon
                    onClick={this.deleteState}
                    labelPosition="left"
                  >
                    <Icon name="undo" />
                    Delete
                  </Button>
                </Grid.Column>
              )}
            </Grid>
          </Segment>
        );
      } else {
        return null;
      }
    }
  }
}
/*

{this.props.stateOrDevice ? 
                        <DeviceSettingsModal
                        ref={this.modalRef}
                        id={this.props.stateOrDevice.id}
                        /> :
                        ""
                    }
*/
const mapStateToProps = (state, ownProps) => ({
  get stateOrDevice() {
    if (state.active.activeTab === "Devices") {
      return state.devices[ownProps.id];
    } else {
      console.log(
        state.sceneStates,
        ownProps.id,
        state.sceneStates[ownProps.id]
      );
      return state.sceneStates[ownProps.id];
    }
  },
  get sceneState() {
    if (state.active.activeTab === "Scenes") {
      const array = [
        ...state.scenes[state.active.activeScene].sceneStates,
      ].sort();
      const deviceState = array.filter((e) => e.id === ownProps.id)[0];
      return deviceState;
    } else {
      return null;
    }
  },
  get type() {
    if (state.active.activeTab === "Scenes") {
      if (state.sceneStates[ownProps.id]) {
        console.log(state.sceneStates[ownProps.id], ownProps.id);
        const id = state.sceneStates[ownProps.id].deviceId;
        console.log(id, state.devices[id].kind);
        return state.devices[id].kind;
      } else {
        return "";
      }
    } else {
      return null;
    }
  },
});
const DeviceContainer = connect(mapStateToProps, RemoteService)(Device);
export default DeviceContainer;