var App = React.createClass({
    getInitialState: function () {
        return ({
            currView: "JudgeForm",
            judge: {
                Email: '',
                FirstName: '',
                LastName: '',
                termid: '',
                judgeid: ''
            }
        })

    },
    changeView: function (view) {
        this.setState({currView: view});
    },

    componentWillMount: function () {
        //console.log("COMPONENT WILL MOUNT APP");
        $(UserEntity).on('JudgesHasChanged', function () {
            this.setState({judge: UserEntity.getJudge()});
        }.bind(this))
    },

    render: function () {
        {
            //console.log("You got here Reder APP")
        }
        ;
        var result = '';
        if (this.state.currView == "JudgeForm")
            result = <JudgeForm onViewChange={this.changeView} judgeData={judge}/>;
        if (this.state.currView == "ConflictTable")
            result = <ConflictTable onViewChange={this.changeView} judgeData={judge}/>;
        return (
            <div className="container">
                <Header onViewChange={this.changeView}/>
                <Content judgeData={judge} view={result} onViewChange={this.changeView}/>
                <Footer />
            </div>
        )
    }
})

var EmailSelectTemplate = React.createClass({
    handleClick: function () {
        this.props.handleSend(this.state.template.id, this.props.sendList, this.props.sendListNoId);
    },
    handleChildChange: function (e) {
        var id = e.target.value;
        var first = this.props.sendList;
        var firstid = first.length == 0 ? this.props.user.id : first[0].id;
        //console.log('this is the first id: ', first);
        $(EmailTemplateEntity).on('EmailTemplatesHasChanged', function () {
            var newTemp = $.grep(this.state.data, function (temp) {
                return (temp.id == id)
            });
            var temp = newTemp[0];
            temp.body = EmailTemplateEntity.getEmailTemplatesInfo();
            temp.subject = EmailTemplateEntity.getEmailTemplatesSubInfo();
            this.setState({data: this.state.data, template: temp});
        }.bind(this));
        $(EmailTemplateEntity).on('EmailSubjectHasChanged', function () {
            EmailTemplateEntity.getPreview(firstid, id);
        }.bind(this));
        EmailTemplateEntity.getPreviewSub(firstid, id);


    },

    getInitialState: function () {
        return ({
            data: [],
            template: ''
        })
    },

    componentDidMount: function () {
        EmailTemplateEntity.loadEmailTemplates();
        $(EmailTemplateEntity).on('EmailTemplatesHasChanged', function () {
            this.setState({data: EmailTemplateEntity.getEmailTemplates()});
        }.bind(this))
    },


    render: function () {
        //console.log(this.props.sendList);
        var curTemplate = this.state.template;
        var shownTemplate = curTemplate != '' ? [<SelectedTemplate template={curTemplate}/>] : "";

        var content = this.state.emailTemplates ?
            <h2>{this.state.emailTemplates[0].title}</h2> : console.log("Not Ready Yet");
        return (
            <div data-role="page" id="emailSelectTemplate" className="container">
                <table className="table">
                    <tr>
                        <td style={{textAlign: 'left', verticalAlign: 'bottom'}}>
                            <h1>Select Template
                                <small> Email</small>
                            </h1>
                        </td>
                        <td style={{textAlign: 'right', verticalAlign: 'bottom'}}>
                            <button id="sendButton" type="button" className="btn btn-lightblue"
                                    onClick={this.handleClick}>Send
                            </button>
                        </td>
                    </tr>
                </table>

                <table className="table table-bordered">
                    <tbody>
                    <tr>
                        <td className="td-primary input-group-addon">Template</td>
                        <td className="td-secondary">
                            <select id="templateSelect" ref="templateList" className="borderless" aria-expanded="true"
                                    onChange={this.handleChildChange}
                                    style={{display: 'block', height: '100%', width:'100%'}}
                                /*onChange={this.handleChildChange(this.props.templates[0].subject)}*/>
                                <option value="" disabled selected>Select a Template</option>

                                {$.map(this.state.data, function (template) {
                                    return [<option key={template.id} id={template.id} value={template.id}>{template.title}</option>];
                                })}
                            </select></td>
                    </tr>

                    </tbody>
                </table>
                {shownTemplate}
            </div>
        );
    }
});

var SelectedTemplate = React.createClass({
    render: function () {
        var template = this.props.template;
        return (
            <table className="table table-bordered">
                <tbody>
                <tr>
                    <td className="input-group-addon">Title</td>
                    <td>{template.title}</td>
                </tr>
                <tr>
                    <td className="input-group-addon">Subject</td>
                    <td>{template.subject}</td>
                </tr>
                <tr>
                    <td colSpan="2" dangerouslySetInnerHTML={{__html: template.body}}></td>
                </tr>
                </tbody>
            </table>
        )
    }
});
