import React, { Component } from "react";
import styled from "styled-components";
import {
Button,
Dropdown,
Form,
Icon,
Image,
Input,
Modal,
} from "semantic-ui-react";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
const StyledDiv = styled.div`
background-color: #505bda;
padding: 3rem;
width: 10rem;
height: 10rem;
border-radius: 100%;
border: none;
position: relative;
box-shadow: 3px 2px 10px 5px #ccc;
transition: all 0.3s ease-out;
:hover {
background-color: #4345d9;
}
:active {
transform: translate(0.3px, 0.8px);
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
}
`;
class NewDevice extends Component {
constructor(props) {
super(props);
this.state = {
step: 1,
openModal: false,
motion: false,
deviceName: "",
};
this.baseState = this.state;
this.createDevice = this.createDevice.bind(this);
}
handleOpen = () => {
this.setState({ openModal: true });
};
handleClose = () => {
this.setState({ openModal: false });
};
resetState = () => {
this.setState(this.baseState);
this.handleClose();
};
nextStep = () => {
this.setState((prevState) => ({ step: prevState.step + 1 }));
};
previousStep = () => {
this.setState((prevState) => ({ step: prevState.step - 1 }));
};
setTypeOfDevice = (e, d) => {
if (d.value === "dimmableLight") {
this.setState({ typeOfDevice: d.value, intensity: 0 });
} else {
this.setState({ typeOfDevice: d.value });
}
};
setDeviceName = (e, d) => {
this.setState({ deviceName: d.value });
};
setTypeOfSensor = (e, d) => {
console.log(d.value);
if (d.value === "motionSensor") {
this.setState({ typeOfSensor: d.value, motion: true });
} else {
this.setState({ typeOfSensor: d.value });
}
};
setLightsDimmerSwitch = (e, d) => {
this.setState({ lightsAttached: d.value });
};
async createDevice() {
// Connect to the backend and create device here.
const data = {
id: null,
roomId: this.props.activeRoom,
name: this.state.deviceName,
kind: this.state.motion ? "motionSensor" : this.state.typeOfDevice,
};
let outputs = null;
const defaultNames = {
regularLight: "New regular light",
dimmableLight: "New intensity light",
smartPlug: "New smart Plug",
sensor: "New sensor",
switch: "New switch",
buttonDimmer: "New button dimmer",
knobDimmer: "New knob dimmer",
securityCamera: "New security camera",
};
if (this.state.deviceName === "") {
data.name = defaultNames[this.state.typeOfDevice];
}
console.log("-------------------------");
console.log(this.state.typeOfDevice);
switch (this.state.typeOfDevice) {
//trying to make securityCamera work
//case "securityCamera":
// data.path="/security_camera_videos/security_camera_1.mp4";
// data.on=false;
//break;
//trying to make thermostat work
case "thermostat":
data.targetTemperature = 0;
data.measuredTemperature = 0;
break;
case "dimmableLight":
data.intensity = 0;
break;
case "sensor":
if (!this.state.motion) {
data.sensor = this.state.typeOfSensor;
data.value = 0;
}
break;
case "switch":
case "buttonDimmer":
case "knobDimmer":
outputs = this.state.lightsAttached;
break;
default:
break;
}
try {
let newDevice = await this.props.saveDevice(data);
if (outputs) {
await this.props.connectOutputs(newDevice, outputs);
}
this.resetState();
} catch (e) {
console.error("device creation error: ", e);
}
}
render() {
const deviceOptions = [
//stuff
{ key: "thermostat", text: "Thermostat", value: "thermostat", image: {} },
{ key: "curtains", text: "Curtain", value: "curtains", image: {} },
//stuff ends
{
key: "light",
text: "Normal Light",
value: "regularLight",
image: { avatar: true, src: "/img/lightOn.svg" },
},
{
key: "intensity-light",
text: "Intensity Light",
value: "dimmableLight",
image: { avatar: true, src: "/img/intensity-light.svg" },
},
{
key: "smart-plug",
text: "Smart Plug",
value: "smartPlug",
image: { avatar: true, src: "/img/smart-plug.svg" },
},
{
key: "sensor",
text: "Sensor",
value: "sensor",
image: { avatar: true, src: "/img/sensorOn.svg" },
},
{
key: "switch",
text: "Switch",
value: "switch",
image: { avatar: true, src: "/img/switchOn.svg" },
},
{
key: "knobDimmer",
text: "Knob Dimmer",
value: "knobDimmer",
image: { avatar: true, src: "/img/knob.svg" },
},
{
key: "buttonDimmer",
text: "Button Dimmer",
value: "buttonDimmer",
image: { avatar: true, src: "/img/plusMinus.svg" },
},
{
key: "securityCamera",
text: "Security Camera",
value: "securityCamera",
image: { avatar: true, src: "/img/security-icon.png" },
},
];
const sensorOptions = [
{
key: "temperature",
text: "Temperature Sensor",
value: "TEMPERATURE",
image: { avatar: true, src: "/img/temperature-sensor.svg" },
},
{
key: "humidity",
text: "Humidity Sensor",
value: "HUMIDITY",
image: { avatar: true, src: "/img/humidity-sensor.svg" },
},
{
key: "light",
text: "Light Sensor",
value: "LIGHT",
image: { avatar: true, src: "/img/light-sensor.svg" },
},
{
key: "motion",
text: "Motion Sensor",
value: "motionSensor",
image: { avatar: true, src: "/img/sensorOn.svg" },
},
];
const availableSwitchDevices = [];
const availableDimmerDevices = [];
this.props.devices.forEach((d) => {
if (
d.kind === "regularLight" ||
d.kind === "dimmableLight" ||
d.kind === "smartPlug"
) {
availableSwitchDevices.push({
key: d.id,
text: d.name,
value: d.id,
});
}
if (d.kind === "dimmableLight") {
availableDimmerDevices.push({
key: d.id,
text: d.name,
value: d.id,
});
}
});
const step1 = (
<Dropdown
name="typeOfDevice"
placeholder="Select a Type of Device"
fluid
selection
onChange={this.setTypeOfDevice}
options={deviceOptions}
/>
);
const step2 = (typeOfDevice) => {
const deviceName = (
<div>
<Form.Field>
<label>Device Name: </label>
<Input
fluid
size={"large"}
onChange={this.setDeviceName}
focus
placeholder="Device Name"
/>
</Form.Field>
</div>
);
const sensorForm = (
<Form.Field style={{ marginTop: "1rem" }}>
<label>Type of Sensor: </label>
<Dropdown
name="typeOfDevice"
placeholder="Select a Type of Sensor"
fluid
selection
onChange={this.setTypeOfSensor}
options={sensorOptions}
/>
</Form.Field>
);
const switchOptions = (
<Form.Field style={{ marginTop: "1rem" }}>
<label>Select the lights or smart plugs You Want to Attach: </label>
<Dropdown
name="typeOfDevice"
placeholder="Select Lights"
fluid
multiple
onChange={this.setLightsDimmerSwitch}
options={availableSwitchDevices}
/>
</Form.Field>
);
const dimmerOptions = (
<Form.Field style={{ marginTop: "1rem" }}>
<label>Select the dimmable lights You Want to Attach: </label>
<Dropdown
name="typeOfDevice"
placeholder="Select Lights"
fluid
multiple
onChange={this.setLightsDimmerSwitch}
options={availableDimmerDevices}
/>
</Form.Field>
);
return (
<Form>
{deviceName}
{this.state.typeOfDevice === "sensor" ? sensorForm : ""}
{this.state.typeOfDevice === "switch" ? switchOptions : ""}
{this.state.typeOfDevice === "buttonDimmer" ||
this.state.typeOfDevice === "knobDimmer"
? dimmerOptions
: ""}
</Form>
);
};
const steps = [step1, step2()];
return (
<Modal
closeIcon
open={this.state.openModal}
onClose={this.resetState}
trigger={
<StyledDiv
onClick={this.handleOpen}
style={{
position: "relative",
top: "calc(50% - 5rem)",
left: "calc(50% - 5rem)",
}}
>
<Image src="/img/add.svg" style={{ filter: "invert()" }} />
</StyledDiv>
}
centered={true}
>
<Modal.Header>Add a New Device</Modal.Header>
<Modal.Content>{steps[this.state.step - 1]}</Modal.Content>
<Modal.Actions>
{this.state.step > 1 ? (
<Button
onClick={this.previousStep}
color="blue"
icon
labelPosition="left"
>
<Icon name="left arrow" />
Back
</Button>
) : (
""
)}
{this.state.step < steps.length ? (
<Button
color="blue"
onClick={this.nextStep}
icon
labelPosition="right"
>
Next
<Icon name="right arrow" />
</Button>
) : (
""
)}
{this.state.step === steps.length ? (
<Button
onClick={this.createDevice}
color="blue"
icon
labelPosition="right"
>
<Icon name="up arrow" />
Finish
</Button>
) : (
""
)}
</Modal.Actions>
</Modal>
);
}
}
const mapStateToProps = (state, _) => ({
devices: Object.values(state.devices),
activeRoom: state.active.activeRoom,
});
const NewDeviceContainer = connect(mapStateToProps, RemoteService)(NewDevice);
export default NewDeviceContainer;