context = window
EventActions = context.EventActions

context.EventList = React.createClass({

    mixins: [Reflux.listenTo(EventStore, "onEventsChanged")],

    events: null,

    getInitialState: function () {
        return {events: null}
    },

    componentDidMount: function () {
    },

    isModeYours: function() {
        return this.props.mode == 'yours'
    },

    render: function () {
        return this.renderAll();
    },


    renderEvents() {
        if(!this.state.events || this.state.events.length == 0) {
            return null;
        }

        var items = []


        var isModeYours = this.isModeYours();
        for(var i = 0; i < this.state.events.length; i++) {
            var event = this.state.events[i]

            if(isModeYours && (!!event.authorization || event.allow_in) || !isModeYours && (!event.authorization && !event.allow_in)) {

                var dynamic = null
                var thumb = null
                if(event.img_url) {
                    thumb = <img className="thumb" src={event.img_url} />
                    dynamic = 'event'
                }
                else {
                    dynamic = 'event no-image'
                }

                var title = event.title ? event.title : 'Missing event title'
                title = <a className="title-link" href={"/events/" + event.slug}>{title}</a>
                var when = event.starts_at ? <div className="when">{new Date(event.starts_at).toLocaleString()}</div> : null
                var item = <div className={dynamic} key={event.id}>
                    {thumb}
                    <div className="detail">
                        <div className="title">{title}</div>
                        <div className="when">{when}</div>
                    </div>
                </div>
                items.push(item)
            }
        }
        return items
    },

    renderAll: function() {
        var events = this.renderEvents()
        var headerText = this.isModeYours() ? 'Your Registered Events' : 'All Upcoming Events'

        if(!events || events.length == 0) {
            return null;
        }

        if(events) {
            var response = <div className="EventList">
                <div className="event-header">
                    {headerText}
                </div>

                <div className="event-section">
                    {events}
                </div>
            </div>
            return response
        }
        else {
            return <div className="EventList">
                <div className="event-header">
                    {headerText}
                </div>

                <div className="event-section loading">
                    Loading ...
                </div>
            </div>;
        }
    },

     onEventsChanged: function (allEvents) {
         var scopedEvents = []
         if(this.isModeYours()) {
             allEvents.events.entries.forEach(function(event) {
                 if (event.authorization || event.allow_in) {
                     scopedEvents.push(event)
                 }
             })
         }
         else {
             scopedEvents = allEvents.events.entries
         }


         this.setState({events: scopedEvents})
    }
})