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

import React, { Component, useState } from "react";
import { Button, Checkbox, Form, Icon, Header, Modal } from "semantic-ui-react";

const DeleteModal = (props) => (
  <Modal trigger={<Button color="red">Remove</Button>} closeIcon>
    <Header icon="archive" content="Are you sure ?" />
    <Modal.Actions>
      <Button color="red">
        <Icon name="remove" /> No
      </Button>
      <Button onClick={() => props.removeDevice()} color="green">
        <Icon name="checkmark" /> Yes
      </Button>
    </Modal.Actions>
  </Modal>
);

const SettingsForm = (props) => {
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  const handleCheckboxChange = (e, d) => {
    const { name, checked } = d;
    setValues({ ...values, [name]: checked });
  };

  const [values, setValues] = useState({ name: "" });

  return (
    <Form>
      <Form.Field>
        <label>New Name: </label>
        <input
          autoComplete="off"
          name="name"
          onChange={handleInputChange}
          value={values.name}
          placeholder="Device name"
        />
      </Form.Field>

      {props.type === "smart-plug" ? (
        <Form.Field>
          <Checkbox
            slider
            name={"reset"}
            onClick={handleCheckboxChange}
            label="Reset Energy Consumption"
          />
        </Form.Field>
      ) : (
        ""
      )}
      <Form.Field>
        <DeleteModal removeDevice={() => props.removeDevice(values)} />
      </Form.Field>
      <Button
        onClick={() => props.saveFunction(values)}
        color="blue"
        type="submit"
      >
        Save
      </Button>
    </Form>
  );
};

export default class SettingsModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: true,
    };
  }

  handleClose = () => {
    this.setState({ open: false });
  };

  saveSettings = (device) => {
    // TODO Here there should be all the connections to save the data in the backend
    console.log("SAVED: ", device);
    if (device.name.length > 0) {
      this.props.updateDevice(device);
    }

    this.props.openModal();
  };

  render() {
    const SettingsModal = () => (
      <Modal
        open={true}
        onOpen={this.props.openModal}
        onClose={this.props.openModal}
      >
        <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
        <Modal.Content>
          <SettingsForm
            type={this.props.device.type}
            removeDevice={this.props.removeDevice}
            saveFunction={this.saveSettings}
          />
        </Modal.Content>
      </Modal>
    );
    return <SettingsModal />;
  }
}