import React, { Component, useState } from "react";
import { Button, Form, Icon, Header, Modal } from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../../../remote";

const DeleteModal = (props) => (
  <Modal
    trigger={
      <Button icon labelPosition="left" inverted color="red">
        <Icon name="trash alternate" />
        Delete device
      </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 [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"
          // {this.props.device.name}
        />
      </Form.Field>

      <Form.Field>
        <DeleteModal removeDevice={() => props.removeDevice(values)} />
      </Form.Field>
      <Button
        onClick={() => props.saveFunction(values)}
        color="green"
        type="submit"
      >
        <Icon name="checkmark" />
        Save changes
      </Button>
    </Form>
  );
};

class DeviceSettingsModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };

    this.updateDevice = this.updateDevice.bind(this);
    this.deleteDevice = this.deleteDevice.bind(this);
  }

  closeModal = (e) => {
    this.setState({ openModal: false });
  };

  openModal = (e) => {
    this.setState({ openModal: true });
  };

  updateDevice(values) {
    if (values.name.length === 0) return;
    this.props
      .saveDevice({ ...this.props.device, name: values.name })
      .then(() => this.setState({ open: false }))
      .catch((err) =>
        console.error(
          `settings modal for device ${this.props.id} deletion error`,
          err
        )
      );
  }

  deleteDevice() {
    this.props
      .deleteDevice(this.props.device)
      .then(() => this.setState({ open: false }))
      .catch((err) =>
        console.error(
          `settings modal for device ${this.props.id} deletion error`,
          err
        )
      );
  }

  render() {
    const SettingsModal = () => (
      <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
        <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
        <Modal.Content>
          <SettingsForm
            type={this.props.device.type}
            removeDevice={this.deleteDevice}
            saveFunction={this.updateDevice}
          />
        </Modal.Content>
      </Modal>
    );
    return <SettingsModal />;
  }
}

const mapStateToProps = (state, ownProps) => ({
  device: state.devices[ownProps.id],
});
const DeviceSettingsModalContainer = connect(
  mapStateToProps,
  RemoteService,
  null,
  { forwardRef: true }
)(DeviceSettingsModal);
export default DeviceSettingsModalContainer;