import React, { Component } from "react";
import {
  Menu,
  Grid,
  Icon,
  Responsive,
  Segment,
  Dropdown,
} from "semantic-ui-react";
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
import ModalWindow from "../components/modalform";

class Navbar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeItemName: "Home",
      activeItem: -1,
      edited: "",
      editMode: false,
    };
  }

  componentDidMount() {
    this.setState({
      activeItem: this.props.activeItem,
    });
  }

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

  handleClick = (e, { id, name }) => {
    let obj = undefined;
    this.props.rooms.forEach((e) => {
      if (e.id === id) {
        obj = e;
      }
    });

    this.setState({
      activeItem: id,
      activeRoom: obj,
      activeItemName: name,
    });
    this.props.handleItemClick(id);
  };

  render() {
    //const { activeItem } = this.state
    return (
      <div style={{ background: "#1b1c1d!important" }}>
        <Segment.Group>
          <Responsive as={Segment} minWidth={768}>
            <Grid>
              <Grid.Row color="black">
                <button
                  style={editButtonStyle}
                  onClick={this.editModeController}
                >
                  Edit
                </button>
              </Grid.Row>
              <Grid.Row color="black">
                <Menu inverted fluid vertical>
                  <Menu.Item
                    key={-1}
                    id={-1}
                    name="Home"
                    active={this.state.activeItem === -1}
                    onClick={this.handleClick}
                  >
                    <Grid>
                      <Grid.Row>
                        <Grid.Column>
                          <Icon name="home" size="small" />
                        </Grid.Column>
                        <Grid.Column>HOME</Grid.Column>
                      </Grid.Row>
                    </Grid>
                  </Menu.Item>

                  {this.props.rooms
                    ? this.props.rooms.map((e, i) => {
                        return (
                          <Menu.Item
                            id={e.id}
                            key={i}
                            name={e.name}
                            active={this.state.activeItem === e.id}
                            onClick={this.handleClick}
                          >
                            <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}
                                      updateRoom={this.props.updateRoom}
                                      deleteRoom={this.props.deleteRoom}
                                    />
                                  ) : null}
                                </Grid.Column>
                              </Grid.Row>
                            </Grid>
                          </Menu.Item>
                        );
                      })
                    : null}

                  <Menu.Item
                    name="newM"
                    active={this.state.activeItem === "newM"}
                  >
                    <Grid>
                      <Grid.Row centered name="new">
                        <ModalWindow type="new" addRoom={this.props.addRoom} />
                      </Grid.Row>
                    </Grid>
                  </Menu.Item>
                </Menu>
              </Grid.Row>
            </Grid>
          </Responsive>

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

                  {this.props.rooms
                    ? this.props.rooms.map((e, i) => {
                        return (
                          <Dropdown.Item
                            id={e.id}
                            key={i}
                            name={e.name}
                            active={this.state.activeItem === e.id}
                            onClick={this.handleClick}
                          >
                            <Grid>
                              <Grid.Row>
                                <Grid.Column width={1}>
                                  <Icon name={e.icon} size="small" />
                                </Grid.Column>
                                <Grid.Column>{e.name}</Grid.Column>
                              </Grid.Row>
                            </Grid>
                          </Dropdown.Item>
                        );
                      })
                    : null}
                </Dropdown.Menu>
              </Dropdown>
            </Menu>
            <Grid inverted>
              <Grid.Row>
                <Grid.Column width={8}>
                  <ModalWindow type="new" addRoom={this.props.addRoom} />
                </Grid.Column>
                {this.state.activeItem !== -1 ? (
                  <Grid.Column width={8}>
                    <ModalWindow
                      type="modify"
                      idRoom={this.state.activeRoom}
                      updateRoom={this.props.updateRoom}
                      deleteRoom={this.props.deleteRoom}
                    />
                  </Grid.Column>
                ) : null}
              </Grid.Row>
            </Grid>
          </Responsive>
        </Segment.Group>
      </div>
    );
  }
}

export default Navbar;
