import React from 'react/addons';
import Reflux from 'reflux';
import $ from 'jquery';

import BackLinkTitle from './BackLinkTitle.jsx';
import BackLinkEntry from './BackLinkEntry.jsx';
import BackLinkEmpty from './BackLinkEmpty.jsx';

import backLinkStore from './back-link-store.jsx';
import {BackLinkActions} from './BackLinkActions.jsx';

import '../../styles/back-link-page.less';

$(function() {
    $(window).on('hashchange', x => {
        BackLinkActions.refreshPage();
    });
});

var BackLinkPageApp = React.createClass({
    mixins: [Reflux.connect(backLinkStore, 'store')],

    render() {
        var tag = this.state.store.tag;

        var backLinkElems = [];
        if (tag.backLinks) {
            Object.keys(tag.backLinks)
                .map(function (key) {
                    var backLink = tag.backLinks[key];
                    backLink.tagDescr = tag.descr;

                    backLinkElems.push(<BackLinkEntry backLink={backLink}/>);
                });
        }

        if (!backLinkElems.length) {
            backLinkElems.push(<BackLinkEmpty />);
        }

        return <div>
            <BackLinkTitle tag={tag}/>

            <div className='back-link-entries'>
                {backLinkElems}
            </div>
        </div>
    }
});

React.render(<BackLinkPageApp />,
    document.getElementById('content-wrapper')
);