context = window
ConfigStore = context.ConfigStore
EventActions = context.EventActions
ConfigActions = context.ConfigActions


context.EventsPage = React.createClass(
{

    mixins: [Reflux.listenTo(ConfigStore, "onConfig")],

    getInitialState: function () {
        return {submitting: false, error: null, event_page_top_logo_url: null}
    },

    componentDidMount: function () {
        EventActions.refresh()
        ConfigActions.configInit()
    },

    onConfig: function(configs) {
        if (configs.event_page_top_logo_url) {
            this.setState({event_page_top_logo_url: configs.event_page_top_logo_url})
        }
    },


    authorizeDone: function(response) {
        this.setState({submitting:false})
        EventActions.addAuthorization(response)

        window.location.href ="/events/" + response.slug
    },

    authorizeFailed: function(e) {
        if(e instanceof SyntaxError) {
            this.setState({error: 'Server error. Please try again or contact support@jamkazam.com.'})
        }
        else if(e instanceof Error) {
            this.setState({error: 'Please enter a valid Eventbrite Order ID'})
        }
        else {
                console.log("heheh", e)
        }
        this.setState({submitting:false})
    },

    handleSubmit: function(event) {
        var value = document.getElementById("order-input").value
        if(value) {
            context.JK.Rest2.authorizeLiveStream({order: value}).then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }
                return response.json()
            }).then((response) => this.authorizeDone(response)).catch((jqXHR) => this.authorizeFailed(jqXHR))
            this.setState({submitting: true, error:null})
        }
        event.preventDefault();
    },
    render: function () {

        var ctaButtonClasses = "cta-button"
        if(this.state.submitting) {
            ctaButtonClasses = ctaButtonClasses + " submitting"
        }
        var errorClasses = "error"
        if(this.state.error) {
            errorClasses = errorClasses + " active"
        }

        /**
        var listing = <div className="listings">
            <div className="preview-and-action-box">
                <div id="upcoming-yours">
                    <EventList mode="yours"/>
                </div>
                <div id="upcoming-all">
                    <EventList mode="all"/>
                </div>
            </div>
        </div>
         */

        //tmp
        top_logo = null
        if(this.state.event_page_top_logo_url) {
            top_logo = <img src={this.state.event_page_top_logo_url}/>
        }
        listing = null
        var response = <div className="EventsPage">
            <div id="header">
                <div className="logo-holder">{top_logo}</div>
            </div>
            <div id="top-container">
                <div className="header">
                    <p>Enter your order number from<img className="eventbrite-logo" src="/assets/event/eventbrite-logo.png"/>below:</p>
                </div>
                <div className="submit-row">
                    <div className="submit promo-start">
                        <form id="unlock" onSubmit={this.handleSubmit}>
                            <input type="text" name="order" className="order-input" id="order-input"/>
                            <button className={ctaButtonClasses}>Unlock Livestream</button>
                        </form>
                        <span className={errorClasses}>{this.state.error}</span>
                    </div>
                </div>
            </div>
            {listing}
        </div>
        return response
    },

})