var React = require('react'),
    Fluxxor = require('fluxxor');

import {compact} from 'lodash';

var FluxMixin = Fluxxor.FluxMixin(React),
    StoreWatchMixin = Fluxxor.StoreWatchMixin;

var TabbedArea = require('react-bootstrap/lib/TabbedArea');

var Annotations = require('../generic/annotations'),
    Breadcrumbs = require('../generic/breadcrumbs'),
    FoldableAuditSection = require('../generic/foldable_audit_section'),
    TabMixin = require('../generic/tab_mixin'),
    RoleGraph = require('../graph/graph'),
    Refresh = require('../refresh/refresh');

var AuditTable = require('../audit/table');

var Activity = require('./activity'),
    Updaters = require('./updaters'),
    Executors = require('./executors'),
    Details = require('./details');

export default React.createClass({
    displayName: 'HostView',

    mixins: [FluxMixin, StoreWatchMixin('audit', 'host', 'resources', 'route'), TabMixin],

    askForNewData(state) {
        var actions = this.getFlux().actions;

        actions.audit.loadForRole('host', state.id);
        actions.audit.loadForResource('host', state.id);
        actions.host.load(state.id);
        actions.resources.loadOne('host', state.id);
    },

    componentDidMount() {
        this.askForNewData(this.state);
    },

    componentWillUpdate(nextProps, nextState) {
        if (this.state.id !== nextState.id) {
            this.askForNewData(nextState);
        }

        return true;
    },

    getStateFromFlux() {
        var flux = this.getFlux(),
            id = flux.store('route').getParam('id'),
            audit = flux.store('audit').getEventFor('host', id),
            data = flux.store('host').getData(),
            resource = flux.store('resources').getResource('host', id);

        var ret = {
            id: id,
            loading: data.loading,
            host: data.host,
            owned: data.owned,
            roles: data.roles,
            owner: resource.data.owner,
            annotations: resource.data.annotations,
            resource: resource.data,
            audit: audit.data,
            resources: data.resources,
            executors: data.executors,
            updaters: data.updaters
        };

        ret.loading.audit = audit.loading;
        ret.loading.owner = resource.loading;
        ret.loading.annotations = resource.loading;

        return ret;
    },

    render() {
        var permissionsTab = this.permissionsTab(this.state.host.roleid),
            membershipsTab = this.membershipsTab(this.state.host.roleid),
            ownedTab = this.ownedTab();

        var tabs = compact([
            membershipsTab,
            ownedTab,
            permissionsTab
        ]);

        var elems = [
            {url: '/ui/hosts', text: 'Hosts'},
            {url: '', text: this.state.host.id},
            {url: '', text: '(owned by ' + this.state.host.ownerid + ')'}
        ];

        return (
          <div className="b-host">
            <Breadcrumbs elems={elems} />
            <hr />
            <Activity audit={this.state.audit}
                      roleid={this.state.host.roleid}
                      isLoading={this.state.loading.audit} />
            <hr />
            {FoldableAuditSection.warnings(this.state.audit, this.state.loading.audit)}
            <hr />
            <div className="row">
              <div className="col-md-6">
                <Updaters data={this.state.updaters}
                          isLoading={this.state.loading.updaters} />
              </div>
              <div className="col-md-6">
                <Executors data={this.state.executors}
                          isLoading={this.state.loading.executors} />
              </div>
            </div>
            <hr />
            <div className="row">
              <div className="col-md-6">
                <Details owner={this.state.owner}
                         host={this.state.host}
                         isLoading={this.state.loading.owner || this.state.loading.host} />
              </div>
              <div className="col-md-6">
                <h2>Annotations<Refresh show={false} /></h2>
                <Annotations annotations={this.state.annotations} />
              </div>
            </div>
            <hr/>
            <h2>Other<Refresh show={this.state.loading.annotations} /></h2>
            <TabbedArea>
              {tabs}
            </TabbedArea>
            <hr />
            <RoleGraph height="400"
                       kind="host"
                       id={this.state.id} />
            <hr />
            <AuditTable events={this.state.audit}
                        isLoading={this.state.loading.audit}
                        caption="Recent Activity" />
          </div>
        );
    }
});