import React, { Component } from "react";
import {
  Button,
  Header,
  Modal,
  Icon,
  Responsive,
  Form,
  Input,
} from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../remote";
import { appActions } from "../storeActions";
//import { update } from "immutability-helper";

class SceneModal extends Component {
  constructor(props) {
    super(props);
    this.state = this.initialState;
    this.addSceneModal = this.addSceneModal.bind(this);
    this.modifySceneModal = this.modifySceneModal.bind(this);
    this.deleteScene = this.deleteScene.bind(this);
  }

  get initialState() {
    return {
      name: this.type === "new" ? "New Scene" : this.props.scene.name,
      openModal: false,
    };
  }

  setInitialState() {
    this.setState(this.initialState);
  }

  get type() {
    return !this.props.id ? "new" : "modify";
  }

  addSceneModal = (e) => {
    let data = {
      name: this.state.name,
    };

    this.props
      .saveScene(data, null)
      .then(() => {
        this.setInitialState();
        this.closeModal();
      })
      .catch((err) => console.error("error in creating room", err));
  };

  modifySceneModal = (e) => {
    let data = {
      name: this.state.name,
    };

    this.props
      .saveScene(data, this.props.id)
      .then(() => {
        this.setInitialState();
        this.closeModal();
      })
      .catch((err) => console.error("error in updating room", err));
  };

  deleteScene = (e) => {
    this.props
      .deleteScene(this.props.id)
      .then(() => this.closeModal())
      .catch((err) => console.error("error in deleting room", err));
  };

  changeSomething = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({ [nam]: val });
  };

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

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

  render() {
    return (
      <div>
        {!this.props.nicolaStop ? (
          <div>
            <Responsive minWidth={768}>
              {this.type === "new" ? (
                <Button
                  icon
                  labelPosition="left"
                  inverted
                  onClick={this.openModal}
                >
                  <Icon name="plus" size="small" />
                  ADD SCENE
                </Button>
              ) : (
                <Icon name="pencil" size="small" onClick={this.openModal} />
              )}
            </Responsive>
            <Responsive maxWidth={768}>
              {this.type === "new" ? (
                <Button
                  icon
                  fluid
                  labelPosition="left"
                  onClick={this.openModal}
                >
                  <Icon name="plus" size="small" />
                  ADD SCENE
                </Button>
              ) : (
                <Button
                  icon
                  fluid
                  labelPosition="left"
                  onClick={this.openModal}
                >
                  <Icon name="pencil" size="small" />
                  EDIT SCENE
                </Button>
              )}
            </Responsive>
          </div>
        ) : null}

        <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
          <Header>
            {this.type === "new" ? "Add new scene" : "Modify scene"}
          </Header>
          <Modal.Content>
            <Form>
              <p>Insert the name of the scene:</p>
              <Form.Field>
                <Input
                  label="Scene name"
                  placeholder="Scene Name"
                  name="name"
                  type="text"
                  onChange={this.changeSomething}
                  value={this.state.name}
                />
              </Form.Field>
            </Form>

            {this.type === "modify" ? (
              <Button
                icon
                labelPosition="left"
                inverted
                color="red"
                onClick={this.deleteScene}
              >
                <Icon name="trash alternate" />
                Delete Scene
              </Button>
            ) : null}
          </Modal.Content>
          <Modal.Actions>
            <Button color="red" onClick={this.closeModal}>
              <Icon name="remove" />{" "}
              {this.type === "new" ? "Cancel" : "Discard changes"}
            </Button>

            <Button
              color="green"
              onClick={
                this.type === "new" ? this.addSceneModal : this.modifySceneModal
              }
            >
              <Icon name="checkmark" />{" "}
              {this.type === "new" ? "Add scene" : "Save changes"}
            </Button>
          </Modal.Actions>
        </Modal>
      </div>
    );
  }
}

const setActiveScene = (activeScene) => {
  return (dispatch) => dispatch(appActions.setActiveScene(activeScene));
};

const mapStateToProps = (state, ownProps) => ({
  scene: ownProps.id ? state.scenes[ownProps.id] : null,
});
const SceneModalContainer = connect(
  mapStateToProps,
  { ...RemoteService, setActiveScene },
  null,
  { forwardRef: true }
)(SceneModal);
export default SceneModalContainer;