import React, { Component } from "react";
import {
  Menu,
  Button,
  Grid,
  Icon,
  Responsive,
  Dropdown,
} from "semantic-ui-react";
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
import ModalWindow from "../components/modalform";
import { RemoteService } from "../remote";
import { connect } from "react-redux";
import { appActions } from "../storeActions";

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

    this.toggleEditMode = this.toggleEditMode.bind(this);
    this.selectRoom = this.selectRoom.bind(this);

    this.getRooms();
  }

  getRooms() {
    this.props.fetchAllRooms().catch(console.error);
  }

  get activeItem() {
    return this.props.activeRoom;
  }

  set activeItem(item) {
    this.props.setActiveRoom(item);
  }

  get activeItemName() {
    console.log(this.constructor);
    if (this.props.activeRoom === -1) return "Home";
    return this.props.rooms[this.props.activeRoom];
  }

  toggleEditMode(e) {
    this.setState((prevState) => ({ editMode: !prevState.editMode }));
  }

  selectRoom(e, { id }) {
    this.activeItem = id;
  }

  render() {
    return (
      <div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
        <Responsive minWidth={768}>
          <Grid>
            <Grid.Row color="black">
              <button style={editButtonStyle} onClick={this.toggleEditMode}>
                Edit
              </button>
            </Grid.Row>
            <Grid.Row>
              <Menu inverted fluid vertical>
                <Menu.Item
                  key={-1}
                  id={-1}
                  name="Home"
                  active={this.activeRoom === -1}
                  onClick={this.selectRoom}
                >
                  <Grid>
                    <Grid.Row>
                      <Grid.Column>
                        <Icon name="home" size="small" />
                      </Grid.Column>
                      <Grid.Column>HOME</Grid.Column>
                    </Grid.Row>
                  </Grid>
                </Menu.Item>

                {Object.values(this.props.rooms).map((e, i) => {
                  return (
                    <Menu.Item
                      id={e.id}
                      key={i}
                      name={e.name}
                      active={this.activeRoom === e.id}
                      onClick={this.selectRoom}
                    >
                      <Grid>
                        <Grid.Row>
                          <Grid.Column>
                            <Icon name={e.icon} size="small" />
                          </Grid.Column>
                          <Grid.Column width={8}>{e.name}</Grid.Column>
                          <Grid.Column floated="right">
                            {this.state.editMode ? (
                              <ModalWindow type="modify" idRoom={e.id} />
                            ) : null}
                          </Grid.Column>
                        </Grid.Row>
                      </Grid>
                    </Menu.Item>
                  );
                })}

                <Menu.Item name="newM">
                  <Grid>
                    <Grid.Row centered name="new">
                      <ModalWindow type="new" />
                    </Grid.Row>
                  </Grid>
                </Menu.Item>
              </Menu>
            </Grid.Row>
          </Grid>
        </Responsive>

        <Responsive maxWidth={768}>
          <Menu>
            <Dropdown item fluid text={this.activeItemName}>
              <Dropdown.Menu>
                <Dropdown.Item
                  key={-1}
                  id={-1}
                  name="Home"
                  active={this.activeRoom === -1}
                  onClick={this.selectRoom}
                >
                  <Grid>
                    <Grid.Row>
                      <Grid.Column>
                        <Icon name="home" size="small" />
                      </Grid.Column>
                      <Grid.Column>Home</Grid.Column>
                    </Grid.Row>
                  </Grid>
                </Dropdown.Item>

                {Object.values(this.props.rooms).map((e, i) => {
                  return (
                    <Dropdown.Item
                      id={e.id}
                      key={i}
                      name={e.name}
                      active={this.activeRoom === e.id}
                      onClick={this.selectRoom}
                    >
                      <Grid>
                        <Grid.Row>
                          <Grid.Column width={1}>
                            <Icon name={e.icon} size="small" />
                          </Grid.Column>
                          <Grid.Column>{e.name}</Grid.Column>
                        </Grid.Row>
                      </Grid>
                      <ModalWindow type="modify" nicolaStop={true} idRoom={e} />
                    </Dropdown.Item>
                  );
                })}
              </Dropdown.Menu>
            </Dropdown>
          </Menu>
          <Grid inverted>
            <Grid.Row>
              <Grid.Column width={8}>
                <ModalWindow type="new" />
              </Grid.Column>
              {this.activeRoom !== -1 ? (
                <Grid.Column width={8}>
                  <Button icon fluid labelPosition="left">
                    <Icon name="pencil" size="small" />
                    EDIT ROOM
                  </Button>
                </Grid.Column>
              ) : null}
            </Grid.Row>
          </Grid>
        </Responsive>
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    setActiveRoom: (activeRoom) =>
      dispatch(appActions.setActiveRoom(activeRoom)),
  };
};
const NavbarContainer = connect(mapDispatchToProps, RemoteService)(Navbar);
export default NavbarContainer;