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

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>
      ) : ""}
      <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);

    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} saveFunction={this.saveSettings}/>
        </Modal.Content>
      </Modal>
    );
    return (
      <SettingsModal/>
    )
  }

}