import React, { Component, PropTypes } from 'react'
import { MessageUtils } from '../../flow/utils.js'

export default View => class extends React.Component {

    static displayName = View.displayName || View.name
    static matches = View.matches

    static propTypes = {
        ...View.propTypes,
        content: PropTypes.string,  // mark as non-required
        flow: PropTypes.object.isRequired,
        message: PropTypes.object.isRequired,
    }

    constructor(props) {
        super(props)
        this.state = {
            content: undefined,
            request: undefined,
        }
    }

    componentWillMount() {
        this.updateContent(this.props)
    }

    componentWillReceiveProps(nextProps) {
        if (
            nextProps.message.content !== this.props.message.content ||
            nextProps.message.contentHash !== this.props.message.contentHash
        ) {
            this.updateContent(nextProps)
        }
    }

    componentWillUnmount() {
        if (this.state.request) {
            this.state.request.abort()
        }
    }

    updateContent(props) {
        if (this.state.request) {
            this.state.request.abort()
        }
        // We have a few special cases where we do not need to make an HTTP request.
        if(props.message.content !== undefined) {
            return this.setState({request: undefined, content: props.message.content})
        }
        if(props.message.contentLength === 0 || props.message.contentLength === null){
            return this.setState({request: undefined, content: ""})
        }

        let requestUrl = MessageUtils.getContentURL(props.flow, props.message)

        // We use XMLHttpRequest instead of fetch() because fetch() is not (yet) abortable.
        let request = new XMLHttpRequest();
        request.addEventListener("load", this.requestComplete.bind(this, request));
        request.addEventListener("error", this.requestFailed.bind(this, request));
        request.open("GET", requestUrl);
        request.send();
        this.setState({ request, content: undefined })
    }

    requestComplete(request, e) {
        if (request !== this.state.request) {
            return // Stale request
        }
        this.setState({
            content: request.responseText,
            request: undefined
        })
    }

    requestFailed(request, e) {
        if (request !== this.state.request) {
            return // Stale request
        }
        console.error(e)
        // FIXME: Better error handling
        this.setState({
            content: "Error getting content.",
            request: undefined
        })
    }

    render() {
        return this.state.content !== undefined ? (
            <View content={this.state.content} {...this.props}/>
        ) : (
            <div className="text-center">
                <i className="fa fa-spinner fa-spin"></i>
            </div>
        )
    }
};
class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/cgit.cgi/openwrt/upstream/tree/?id=e790227553c057d38064e720add92b3bee42ecf2'>root</a>/<a href='/cgit.cgi/openwrt/upstream/tree/package?id=e790227553c057d38064e720add92b3bee42ecf2'>package</a>/<a href='/cgit.cgi/openwrt/upstream/tree/package/kernel?id=e790227553c057d38064e720add92b3bee42ecf2'>kernel</a>/<a href='/cgit.cgi/openwrt/upstream/tree/package/kernel/button-hotplug?id=e790227553c057d38064e720add92b3bee42ecf2'>button-hotplug</a>/<a href='/cgit.cgi/openwrt/upstream/tree/package/kernel/button-hotplug/src?id=e790227553c057d38064e720add92b3bee42ecf2'>src</a>/<a href='/cgit.cgi/openwrt/upstream/tree/package/kernel/button-hotplug/src/Kconfig?id=e790227553c057d38064e720add92b3bee42ecf2'>Kconfig</a></div><div class='content'>blob: aa292e9c13ca08ce04888f263bd81193ff70617f (<a href='/cgit.cgi/openwrt/upstream/plain/package/kernel/button-hotplug/src/Kconfig?id=e790227553c057d38064e720add92b3bee42ecf2'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
</pre></td>
<td class='lines'><pre><code>