import React, {Component} from 'react';
import DevicePanel from "../components/dashboard/DevicePanel";

import { call } from '../client_server';
import {Button} from 'semantic-ui-react';
import { Menu } from 'semantic-ui-react'
import { Grid, Image, Icon } from 'semantic-ui-react'
import NavbarTest from './NavbarTest'

export default class Dashboard extends Component{
  constructor(props) {
    super(props);
    this.state = {
      rooms: [],
      activeItem: "Home"
    };

    this.addRoom = this.addRoom.bind(this);
    this.handleItemClick = this.handleItemClick.bind(this);
  }

  UNSAFE_componentWillMount() {
    call.getAllRooms(this.props.token)
      .then(res => {
        res.data.forEach((e) => {
          this.setState(state => ({
            rooms: state.rooms.concat([e])
          }));
        });
        console.log(res, this.state.rooms)
      }).catch(err => {
        console.log(err);
      });
  }

  addRoom(e) {
    e.preventDefault();
    const params = {
      "icon": "ciao",
      "image": "ciao",
      "name": "kitchen"
    }
    call.createRoom(params)
      .then(res => {
        console.log(res);
        if (res.status === 200 && res.data) {
          this.setState(state => ({
            rooms: state.rooms.concat([res.data])
          }));
        }
        console.log(this.state.rooms);
      }).catch(err => {
        console.log(err);
      });
  };

  handleItemClick(el) {
    //da fare richiesta get della room e settare activeItem
  }
 
  render () {
    return(
      <div style={{height : "110vh"}}>
        <Button  color='blue' fluid size='large' onClick={this.addRoom}>
            Add Room
        </Button>
        <Grid>
        <Grid.Row>
            <Grid.Column width={3}>
              <NavbarTest rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
            </Grid.Column>
      
            <Grid.Column width={13}>
              <DevicePanel />
              </Grid.Column>
          </Grid.Row>
        </Grid>
      </div>
    )
  }
}