import Button from 'rebass/src/Button';
import DotIndicator from 'rebass/src/DotIndicator';
import Panel from 'rebass/src/Panel';
import PanelHeader from 'rebass/src/PanelHeader';
import Announcing from "./Announcing";
import Firing from "./Firing";
import Lasers from "./Lasers";
import Movement from "./Movement";
import Programming from "./Programming";
import Touching from "./Touching";
import Waiting from "./Waiting";
import state from "./State";

var STATE = {
    Announcing: Announcing,
    Firing: Firing,
    Lasers: Lasers,
    Movement: Movement,
    Programming: Programming,
    Touching: Touching,
    Waiting: Waiting,
};

export default class Playing extends React.Component {
    constructor(props) {
        super(props);
        var view = STATE[state.public.state];
        if (!view) {
            view = Waiting;
        }
        this.quit = this.quit.bind(this);
        this.state = {
            view: view,
            name: state.public.state,
            register:state.public.register
        };
    }

    on_state(msg) {
        state.state = {};
        state.public.state = msg.state;
        Object.keys(state.public.player).map((p) => state.public.player[p].ready = 0);
        var view = STATE[msg.state];
        if (!view) {
            view = Waiting;
        }
        if (msg.state === 'Programming') {
            state.public.register = undefined;
        }
        else if (msg.state === 'Movement') {
            if (state.public.register == undefined)
                state.public.register = 0;
            else
                state.public.register++;
        }
        this.setState({
            view:view,
            name:msg.state,
            register:state.public.register
        });
    }

    quit() {
        this.props.ws.send({cmd: 'quit'});
    }

    options() {
        return <div/>
    }

    register() {
        if (this.state.register !== undefined) {
            return (
            <div style={{right:24, top:16, position:'absolute', textAlign:'center'}}>
                Register<br/>
                <DotIndicator active={this.state.register} style={{position:'relative', top:-4}} length={5}/>
            </div>);
        }
        return <span/>
    }

    render() {
        const State = this.state.view;
        return (
<Panel theme="info">
  <PanelHeader style={{textTransform:'captitalize'}}>
    {this.state.name.replace('_', ' ')} {this.register()}
  </PanelHeader>
    <State {...this.props} state={this.state.name} ref={(e)=>this.view = e}/>
    {this.options()}
	<Button theme="error" onClick={this.quit} style={{position:'fixed',bottom:'0px',left:'0px'}}>
		Quit
	</Button>
</Panel>
    )}
}


@@ -1810,23 +1810,22 @@
  %7D%0A%0A    
-options
+render
 () %7B%0A   
@@ -1833,231 +1833,107 @@
     
-return %3Cdiv/%3E%0A    %7D%0A%0A    register() %7B%0A        if (this.state.register !== undefined) %7B%0A            return (%0A            %3Cdiv style=%7B%7Bright:24, top:16, position:'absolute', textAlign:'center'%7D%7D%3E%0A                Register%3Cbr/%3E
+const State = this.state.view;%0A        var progress%0A            = this.state.register !== undefined
 %0A   
@@ -1941,19 +1941,17 @@
         
-   
+?
  %3CDotInd
@@ -2053,260 +2053,282 @@
     
-%3C/div%3E);%0A        %7D%0A        return %3Cspan/%3E%0A    %7D%0A%0A    render() %7B%0A        const State = this.state.view;%0A        return (%0A%3CPanel theme=%22info%22%3E%0A  %3CPanelHeader style=%7B%7BtextTransform:'captitalize'%7D%7D%3E%0A    %7Bthis.state.name.replace('_', ' ')%7D %7Bthis.register()%7D
+: %3Cspan/%3E;%0A%0A        return (%0A%3CPanel theme=%22info%22%3E%0A  %3CPanelHeader style=%7B%7BtextTransform:'captitalize', height:'3em'%7D%7D%3E%0A    %3Cdiv style=%7B%7Btop:'.5em', position:'relative', textAlign:'center'%7D%7D%3E%0A        %3Cdiv%3E%7Bthis.state.name.replace('_', ' ')%7D%3C/div%3E%0A        %7Bprogress%7D%0A    %3C/div%3E
 %0A  %3C
@@ -2423,29 +2423,8 @@
 %7D/%3E%0A
-    %7Bthis.options()%7D%0A
 %09%3CBu

Fix #38 Merge state name and register progress