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 { Grid } from 'semantic-ui-react'
/* 
  rooms -> actual rooms
  activeItem -> the current room in view 
  devices -> current device in current room view


  id of Home is -1
*/

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

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

  componentDidMount() {
    call.getAllRooms(this.props.tkn)
      .then(res => {
          this.setState({
            rooms: res.data
          });
      }).catch(err => {
        console.log(err);
      });
    call.getAllDevices(this.props.tkn) 
      .then(res => {
          this.setState({
            devices: res.data
          });
      }).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) {
    call.deleteRoom(id)
      .then(res => {
        //remove room in state.rooms
      }).catch(err => {
        console.log(err);
      });
  }

  handleItemClick(id) {
    // el -> obj of name and id
    //da fare richiesta get della room e settare activeItem
    call.getAllDevicesByRoom(id, this.props.tkn)
      .then(res => {
          this.setState({
            devices: res.data
          });
      }).catch(err => {
        console.log(err);
      });
  }

  render () {
    return(
      <div style={{height : "110vh", background: '#1b1c1d'}}>
        <Grid >

          <Grid.Row color='black'>
            {/*TODO change this back
          <Grid.Column>
            <MyHeader logout={this.props.logout} />
          </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 devices={this.state.devices} />
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </div>
    )
  }
}