import React from 'react';
import {connect} from 'react-redux';
import {mainformTabSelected} from '../actions/mainform';

// UI
import Navbar from 'react-bootstrap/lib/Navbar';
import NavItem from 'react-bootstrap/lib/NavItem';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import Nav from 'react-bootstrap/lib/Nav';
import MenuItem from 'react-bootstrap/lib/MenuItem';
import TxtResultList from "./txt_result_list";
import Utter from "./utter";
import Worker from './worker';
import Scheduler from "./scheduler/scheduler.js";

// CSS
import '../../css/mainform.css';

class MainForm extends React.Component{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
    }

    handleSelect(key) {
        this.props.dispatch(mainformTabSelected(key));
    }

    render() {
        var content = <div/>;
        switch(this.props.activePageId) {
        case 1:
            content = <TxtResultList/>;
            break;
        case 2:
            content = <Utter/>;
            break;
        case 3:
            content = <Worker/>;
            break;
        case 4:
            content = <Scheduler/>;
            break;
        default:
            content = <div/>;
            break;
        }
        return (
                <div>
                <Navbar brand="Tx Portal" activeKey={this.props.activePageId} fixedTop={true} fluid={true}>
                <Nav>
                <NavItem eventKey={1} href="javascript:void(0);" onClick={this.handleSelect.bind(this, 1)}>Test Results</NavItem>
                <NavItem eventKey={2} href="javascript:void(0);" onClick={this.handleSelect.bind(this, 2)}>Utter Results</NavItem>
                <NavItem eventKey={3} href="javascript:void(0);" onClick={this.handleSelect.bind(this, 3)}>TXT Workers</NavItem>
                <NavItem eventKey={4} href="javascript:void(0);" onClick={this.handleSelect.bind(this, 4)}>Scheduler</NavItem>
                </Nav>
                </Navbar>
                <div className='portal-content'> {content} </div>
                </div>
        )
    }
}

function select(state) {
    return state.mainform;
}

export default connect(select)(MainForm);

@@ -1397,25 +1397,83 @@
       %3CNav%3E%0A
- 
+%09%09%3CNavDropdown eventKey=%7B1%7D title=%22TXT%22 id=%22txt-dropdown%22%3E%0A
             
@@ -1467,36 +1467,42 @@
 %0A               
-%3CNav
+     %3CMenu
 Item eventKey=%7B1
@@ -1499,19 +1499,21 @@
 ventKey=
-%7B1%7D
+%221.1%22
  href=%22j
@@ -1526,37 +1526,38 @@
 ipt:void(0);%22 on
-Click
+Select
 =%7Bthis.handleSel
@@ -1579,13 +1579,8 @@
 1)%7D%3E
-Test 
 Resu
@@ -1576,35 +1576,36 @@
 s, 1)%7D%3EResults%3C/
-Nav
+Menu
 Item%3E%0A          
@@ -1602,36 +1602,41 @@
                 
-%3CNav
+    %3CMenu
 Item eventKey=%7B2
@@ -1637,11 +1637,80 @@
 Key=
-%7B2%7D
+%221.2%22%3EStatistics%3C/MenuItem%3E%0A                    %3CMenuItem eventKey=%221.3%22
  hre
@@ -1727,37 +1727,38 @@
 ipt:void(0);%22 on
-Click
+Select
 =%7Bthis.handleSel
@@ -1776,30 +1776,25 @@
 is, 
-2)%7D%3EUtter Results%3C/Nav
+3)%7D%3EWorkers%3C/Menu
 Item
@@ -1803,36 +1803,41 @@
                 
-%3CNav
+    %3CMenu
 Item eventKey=%7B3
@@ -1838,11 +1838,13 @@
 Key=
-%7B3%7D
+%221.4%22
  hre
@@ -1861,37 +1861,38 @@
 ipt:void(0);%22 on
-Click
+Select
 =%7Bthis.handleSel
@@ -1910,32 +1910,111 @@
 is, 
-3)%7D%3ETXT Workers%3C/NavItem
+4)%7D%3EScheduler%3C/MenuItem%3E%0A%09%09%3C/NavDropdown%3E%0A%09%09%3CNavDropdown eventKey=%7B2%7D title=%22Utter%22 id=%22utter-dropdown%22
 %3E%0A  
@@ -2027,20 +2027,25 @@
         
-%3CNav
+    %3CMenu
 Item eve
@@ -2054,11 +2054,13 @@
 Key=
-%7B4%7D
+%222.1%22
  hre
@@ -2089,13 +2089,14 @@
 %22 on
-Click
+Select
 =%7Bth
@@ -2126,30 +2126,110 @@
 is, 
-4)%7D%3EScheduler%3C/NavItem
+2)%7D%3EResults%3C/MenuItem%3E%0A                    %3CMenuItem eventKey=%222.2%22%3EWorkers%3C/MenuItem%3E%0A%09%09%3C/NavDropdown
 %3E%0A  

Revert "Revert "Use dropdown menu in main form.""