
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {List, ListItem} from 'material-ui/List';
import Divider from 'material-ui/Divider';
import {orange700, white} from 'material-ui/styles/colors';

import ResourceList from './ResourceList';
import ResourceListToolbar from './ResourceListToolbar';
import FirmwareManagement from './FirmwareManagement';

const Client = require('../Client');

const ERROR = 'error';

const style = {
    list: {
        backgroundColor: orange700,
        height: '100%'
    },

    text: {
        color: white,
    }
}

function appendChildren(id, numChildren) {
    var parent = document.getElementById(id);
    while (parent.firstChild) {
      parent.removeChild(parent.firstChild);
    }

    for (var i = 0; parent.childElementCount <= numChildren; i++) {
        parent.appendChild(document.createElement('child' + i));
    }
};

class MainMenu extends React.Component {

  onDiscover = (packet) => {
    if(packet.getCode !== 69)
    {
      Client.event.emit(ERROR, "Resource Discover Failed " + packet.getCode);
      return;
    }

    var resources = Client.getResourceList(packet.getPayloadObject);

    appendChildren('body', 2);
    ReactDOM.render(
        <ResourceListToolbar />,
        document.getElementById('body').children[0]
    );
    ReactDOM.render(
        <ResourceList data={resources} />,
        document.getElementById('body').children[1]
    );
  };

  onFirmwareResources = (packet) =>{
    if(packet.getCode !== 69)
    {
      Client.event.emit(ERROR, "Firmware Discover Failed " + packet.getCode);
      return;
    }

    var resources = Client.getResourceList(packet.getPayloadObject);

    appendChildren('body', 1);
    ReactDOM.render(
        <FirmwareManagement devices={resources} />,
        document.getElementById('body').children[0]
    );
  };

    handleDiscovery = () => {
        Client.discoverResource(null, this.onDiscover);
    };

    handleFirmware = () => {
        Client.discoverResource("rt=x.org.iotivity.firmware", this.onFirmwareResources);
    };

    constructor(props, context) {
        super(props, context);
        this.state = {
            signin: props.signin
        }
    };

    render() {
        return (
            /* TODO add log page */
            <MuiThemeProvider>
                <List style={style.list}>
                    <ListItem primaryText='Resource list' style={style.text} disabled={!this.state.signin} onTouchTap={this.handleDiscovery} />
                    <Divider />
                    <ListItem primaryText='Firmware management' style={style.text} disabled={!this.state.signin} onTouchTap={this.handleFirmware} />
                    <Divider />
                    <ListItem primaryText='Log view' style={style.text} />
                </List>
            </MuiThemeProvider>
        );
    };
};

export default MainMenu;
