import React, { Component, useState } from "react";
import {
  Button,
  Form,
  Icon,
  Header,
  Modal,
  Input,
  Checkbox,
} 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>Edit Name: </label>
        <Input
          autoComplete="off"
          name="name"
          onChange={handleInputChange}
          placeholder={props.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,
      name: this.props.device.name,
    };

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

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

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

  updateDevice(values) {
    console.log(values, this.external);
    let name = values.name;
    if (values.name.length === 0) {
      name = this.props.device.name;
    }

    let data = {
      ...this.props.device,
      name: name,
    };

    if (this.props.device.kind === "thermostat") {
      let external = values.external
        ? values.external
        : this.props.device.useExternalSensors;
      console.log(external);
      data.useExternalSensors = external;
    }
    console.log(data.useExternalSensors);
    this.props
      .saveDevice(data)
      .then(() => this.setState({ openModal: 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({ openModal: false }))
      .catch((err) =>
        console.error(
          `settings modal for device ${this.props.id} deletion error`,
          err
        )
      );
  }

  _editForm = null;
  get editForm() {
    this._editForm = this._editForm || (
      <SettingsForm
        name={this.state.name}
        removeDevice={this.deleteDevice}
        saveFunction={this.updateDevice}
        tempSensor={this.useExternalTempSensor}
      />
    );
    return this._editForm;
  }

  render() {
    return (
      <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
        <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
        <Modal.Content>{this.editForm}</Modal.Content>
      </Modal>
    );
  }
}

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