frontend/smart-hut/src/components/dashboard/devices/NewDevice.js

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
  }

  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) => {
    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.
    this.resetState();
  };


  render() {
    const deviceOptions = [
      {
        key: 'light',
        text: 'Normal Light',
        value: 'light',
        image: {avatar: true, src: '/img/lightOn.svg'},
      },
      {
        key: 'intensity-light',
        text: 'Intensity Light',
        value: 'intensity-light',
        image: {avatar: true, src: '/img/intensity-light.svg'},
      },
      {
        key: 'smart-plug',
        text: 'Smart Plug',
        value: 'smart-plug',
        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: "motion",
        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 = (
      <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 switchDimmerOptions = (<Form.Field style={{marginTop : "1rem"}}>
        <label>Select the Lights You Want to Attach: </label>
        <Dropdown
          name="typeOfDevice"
          placeholder='Select Lights'
          fluid
          multiple
          onChange={this.setLightsDimmerSwitch}
          options={availableLights}
        />
      </Form.Field>);
      return (
        <Form>
          {deviceName}
          {this.state.typeOfDevice === "sensor" ? (sensorForm) : ""}
          {this.state.typeOfDevice === "switch" || this.state.typeOfDevice === "dimmer" ?
            (switchDimmerOptions) : ""
          }
        </Form>
      )
    };
    const steps = [step1, step2()];
    return (
      <Modal closeIcon open={this.state.openModal}  onClose={this.resetState} trigger={<StyledDiv onClick={this.handleOpen}>
        <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>
    )
  }
}