import React, {Component} from 'react';
import styled from 'styled-components';
import {Button, Dropdown, Form, Icon, Image, Input, Modal} from "semantic-ui-react";
const StyledDiv = styled.div`
background-color : #ff4050;
padding : 3rem;
width: 10rem;
height: 10rem;
border-radius : 100%;
border : none;
position : relative;
box-shadow: 3px 2px 10px 5px #ccc;
transition : all .3s ease-out;
:hover{
background-color : #ff2436;
}
`;
export default class NewDevice extends Component {
constructor(props) {
super(props);
this.state = {
step: 1,
openModal : false
};
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) => {
this.setState({typeOfSensor: d.value});
};
setLightsDimmerSwitch = (e, d) => {
this.setState({lightsAttached : d.value});
};
createDevice() {
// Connect to the backend and create device here.
const data = {
params: {
"name": this.state.deviceName,
},
device: this.state.typeOfDevice
}
switch(this.state.typeOfDevice) {
case "dimmableLight":
data.params["intensity"] = 1;
break;
default:
break;
}
this.props.addDevice(data);
this.resetState();
};
render() {
const deviceOptions = [
{
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: 'dimmer',
text: 'Dimmer',
value: 'dimmer',
image: {avatar: true, src: '/img/dimmer.svg'},
},
];
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 availableLights = [];
this.props.devices.forEach(d => {
availableLights.push(
{
key: d.id,
text: d.name,
value: d.id,
}
)
});
const step1 = (