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

import React, {Component} from 'react';
import styled from 'styled-components';
import {Button, Dropdown, Form, Image} from "semantic-ui-react";
import {addDeviceFormStyle} from "./styleComponents";
import {deviceList} from "./TypesOfDevices";

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;
  }
`;

class NewDeviceForm extends Component {
    constructor(props) {
        super(props);
    }

    formSelector = (option) => {
        switch (option) {
            case "Light":
                return <LightForm/>;
            case "Sensor":
                return "This is a sensor form";
            default:
                return "This is a default text"
        }
    };

    render() {
        let options = [];
        deviceList.forEach((e, i) => {
            options.push({key: i, text: e, value: e})
        });

        return (
            <Form style={addDeviceFormStyle}>
                <Form.Field>
                    <label style={{color: "white"}}>Select the type of device</label>
                    <Dropdown clearable options={options} selection/>
                </Form.Field>

                <Button type='submit' onClick={this.saveChanges}>Save</Button>
            </Form>
        );
    }
}


class LightForm extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        let options = [
            {
                key: 1,
                value: "common",
                text: "Normal Light"
            },
            {
                key: 1,
                value: "intensity",
                text: "Supports intensity level"
            }
        ]
        return (
            <Form.Field>
                <label style={{color: "white"}}>Type of light</label>
                <Dropdown clearable options={options} selection/>
            </Form.Field>
        );
    };
};

export default class NewDevice extends Component {
    constructor(props) {
        super(props);
        this.state = {
            openForm: false
        }
    }

    onClickDevice = (event) => {
        this.setState((prevState) => ({openForm: !prevState.openForm}));
    };

    render() {
        return (
            <StyledDiv onClick={this.onClickDevice}>
                <Image src="/img/add.svg" style={{filter: "invert()"}}/>
                {this.state.openForm ? (
                    <NewDeviceForm/>
                ) : ""}
            </StyledDiv>
        )
    }
}