import React, { Component } from 'react';
import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment } 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 = {
      activeItem: 'Home',
      edited: "",
      editMode : false
    }
  }

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

  handleClick = (e, {id}) => {
    console.log(id);
    this.setState({ activeItem: id,
     });
    this.props.handleItemClick(id)
  }

  render(){
    //const { activeItem } = this.state
    return (
      <div>
      <Segment.Group>
       <Responsive as={Segment}>
          <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}
                    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>

                  </ 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.edit ?
                            <ModalWindow type="modify" idRoom={e} modifyRoom={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}>
            //dropdown menu
            </Responsive>
          </Segment.Group>
       </div>
    );
  }
}

export default Navbar;