import React, { Component } from "react";
import { Button, Header, Modal, Icon, Responsive } 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.setInitialState();

    this.addSceneModal = this.addSceneModal.bind(this);
    this.modifySceneModal = this.modifySceneModal.bind(this);
    this.deleteScene = this.deleteScene.bind(this);
  }

  get initialState() {
    return {
      //INITIAL STATE HERE
    };
  }

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

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

  addSceneModal = (e) => {
    /*let data = {
      // DATA HERE
    };*/
    // TODO CALL TO REMOTE SERVER TO ADD SCENE
    /*this.props
      .saveRoom(data, null)
      .then(() => {
        this.setInitialState();
        this.closeModal();
      })
      .catch((err) => console.error("error in creating room", err));*/
  };

  modifySceneModal = (e) => {
    /*let data = {
      // DATA HERE
    };*/
    // TODO CALL TO REMOTE SERVER TO MODIFY SCENE
    /*this.props
      .saveRoom(data, this.props.id)
      .then(() => {
        this.setInitialState();
        this.closeModal();
      })
      .catch((err) => console.error("error in updating room", err));*/
  };

  deleteScene = (e) => {
    // TODO CALL TO REMOTE SERVER TO DELETE SCENE
    /*
    this.props
      .deleteRoom(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>
            {
              //TODO FORM TO ADD OR MODIFY SCENE
            }

            {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;