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: ""
    }
  }

  showForm = (event) => {
    console.log(event.target.name);
    if (event === "new"){
      console.log("funziona");
      return (<ModalWindow type="new"/>)
    }
  }

  handleClick = (e, { i }) => {
    this.setState({ activeItem: e.name,
                    edited: i
     });
    this.props.handleItemClick(e)
  }

  render(){
    const { activeItem } = this.state
    return (
      <div>
      <Segment.Group>
       <Responsive as={Segment}>
          <Grid>
            <Grid.Row>
                <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
            </Grid.Row>
            <Grid.Row>
                <Menu inverted fluid vertical>
                  <Menu.Item
                    name='Home'
                    active={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
                       key={i}
                       name={e.name}
                       active={activeItem === e.name}
                       onClick={this.handleClick}
                      >
                      <Grid>
                        <Grid.Row>
                          <Grid.Column width={1}>
                            <Icon name="food" size="small"/>
                          </Grid.Column>
                          <Grid.Column width={12}>
                            {e.name}
                          </Grid.Column>
                          <Grid.Column width={1}>
                            <Icon name="pencil" size="small"/>
                          </Grid.Column>
                        </Grid.Row>
                      </Grid>

                      </ Menu.Item>

                     )
                   }) : null
                  }

                  <Menu.Item
                    name='newM'
                    active={activeItem === 'Plus'}
                  >
                  <Grid>
                    <Grid.Row centered onClick={this.showForm} name='new'>

                      <ModalWindow type="new"/>

                    </Grid.Row>
                  </Grid>

                  </ Menu.Item>
                 </Menu>
                </Grid.Row>
              </Grid>
            </Responsive>
            <Responsive as={Segment} maxWidth={768}>
            //dropdown menu
            </Responsive>
          </Segment.Group>
       </div>
    );
  }
}

export default Navbar;