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

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'


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

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

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

  addRoom(data) {
    call.createRoom(data)
      .then(res => {
        console.log(res);
        if (res.status === 200 && res.data) {
          this.setState(state => ({
            rooms: state.rooms.concat([res.data])
          }));
        }
      }).catch(err => {
        console.log(err);
      });
  };

  deleteRoom(id) {

  }

  handleItemClick(el) {
    //da fare richiesta get della room e settare activeItem
  }
 
  render () {
    return(
      <div style={{height : "110vh", background: '#1b1c1d'}}>
        <Grid >
        <Grid.Row color='black'>
          <Grid.Column>
            <MyHeader />
          </Grid.Column>
        </Grid.Row>
        <Grid.Row color='black'>
            <Grid.Column width={3}>
              <Navbar addRoom={this.addRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
            </Grid.Column>
      
            <Grid.Column width={13}>
              <DevicePanel />
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </div>
    )
  }
}