/*
 * STANDARD_RIFT_IO_COPYRIGHT
 */

import React from 'react';
import ReactDOM from 'react-dom';
import AppHeader from 'widgets/header/header.jsx';
import RedundancyStore from './redundancyStore.js';
import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
import SkyquakeRBAC from 'widgets/skyquake_rbac/skyquakeRBAC.jsx';
import 'style/layout.scss';
import {Panel, PanelWrapper} from 'widgets/panel/panel';
import {InputCollection, FormSection} from 'widgets/form_controls/formControls.jsx';

import TextInput from 'widgets/form_controls/textInput.jsx';
import Input from 'widgets/form_controls/input.jsx';
import Button, {ButtonGroup} from 'widgets/button/sq-button.jsx';
import SelectOption from 'widgets/form_controls/selectOption.jsx';
import 'widgets/form_controls/formControls.scss';
import imgAdd from '../../node_modules/open-iconic/svg/plus.svg'
import imgRemove from '../../node_modules/open-iconic/svg/trash.svg'
import _  from 'lodash';
import ROLES from 'utils/roleConstants.js';

import './redundancy.scss';
const PROJECT_ROLES = ROLES.PROJECT;
const PLATFORM = ROLES.PLATFORM;

class StatusDashboard extends React.Component {
    constructor(props) {
        super(props);
        this.Store = this.props.flux.stores.hasOwnProperty('RedundancyStore') ? this.props.flux.stores.RedundancyStore : this.props.flux.createStore(RedundancyStore, 'RedundancyStore');
        this.state = this.Store.getState();
        this.actions = this.state.actions;
    }
    componentDidUpdate() {
    }
    componentWillMount() {
        this.state = this.Store.getState();
        this.Store.getRedundancy();
        this.Store.openRedundancyStateSocket();
        this.Store.listen(this.updateState);
    }
    componentWillUnmount() {
        this.Store.unlisten(this.updateState);
        this.Store.closeSocket();
    }
    updateState = (state) => {
        this.setState(state);
    }
    render() {
        let self = this;
        let html;
        let props = this.props;
        let state = this.state;
        let STATUS = state.status;
        /*

    {
        "active-instance": {
            "active-inst-id": "10.64.210.20",
            "is-this-instance-active": "true",
            "site-name": "site20"
        },
        "vm-identity": "ebbd6444-d6a7-4eda-ab0d-e23fdbcdeffe",
        "health-status": [
            {
                "state": "RUNNING_AS_ACTIVE",
                "rwinstance-id": "10.64.210.20",
                "site-name": "site20"
            },
            {
                "state": "NO_RESPONSE",
                "rwinstance-id": "10.64.210.33",
                "site-name": "site33"
            }
        ]
    }


         */

        html = (
                <PanelWrapper onKeyUp={this.evaluateSubmit}
                    className={`SiteAdmin column`} column>
                    <AppHeader nav={[{ name: 'SITES', onClick: this.context.router.push.bind(this, { pathname: '/sites' })  }, { name: 'CONFIG', onClick: this.context.router.push.bind(this, { pathname: '/config' })}, { name: 'STATUS' }]} />
                    <PanelWrapper onKeyUp={this.evaluateSubmit}
                    className={`SiteAdmin column`} style={{overflow: 'auto'}} column>
                    <Panel
                        title="Active Instance"
                        style={{flex: '0 0 300px'}}
                        no-corners>
                        <TextInput type="text" label="VM ID" readonly={true} value={STATUS['vm-identity'] } />
                        <TextInput type="text" label="active instance ID" readonly={true} value={STATUS['active-instance'] && STATUS['active-instance']['active-inst-id'] } />
                        <TextInput type="text" label="Site Name" readonly={true} value={STATUS['active-instance'] && STATUS['active-instance']['site-name'] } />
                    </Panel>
                    <Panel
                        title="CONFIGURATION STATE"
                        style={{flex: '0 0 250px'}}
                        no-corners>
                           <div className="tableRow tableRow--header">
                                <div>
                                    SITE NAME
                                </div>
                                 <div>
                                    INSTANCE IP
                                </div>
                                <div>
                                    CURRENT STATE
                                </div>
                                <div>
                                    PREVIOUS STATE
                                </div>
                                <div>
                                    CONFIG GENERATION #
                                </div>
                                <div>
                                    LAST PACKAGE UPDATE
                                </div>
                            </div>
                            {
                                STATUS['config-state'] && STATUS['config-state'].map((u, k) => {
                                    return (
                                        <div className={`tableRow tableRow--data`} key={k}>
                                            <div>
                                                {u['site-name'] || '--'}
                                            </div>
                                            <div>
                                                {u['rwinstance-ip'] || '--'}
                                            </div>
                                            <div>
                                                {u['current-state'] || '--'}
                                            </div>
                                            <div>
                                                {u['previous-state'] || '--'}
                                            </div>
                                            <div>
                                                {u['config-generation-number'] || '--'}
                                            </div>
                                            <div>
                                                {u['last-package-update'] || '--'}
                                            </div>


                                        </div>
                                    )
                                })
                            }


                    </Panel>
                    <Panel
                        title="HEALTH STATUS"
                        style={{flex: '0 0 250px'}}
                        no-corners>
                           <div className="tableRow tableRow--header">
                                <div>
                                    RW INSTANCE
                                </div>
                                <div>
                                    STATUS
                                </div>
                            </div>
                            {STATUS['health-status'] && STATUS['health-status'].map((u, k) => {
                            return (
                                <div className={`tableRow tableRow--data`} key={k}>
                                    <div>
                                        {u['rwinstance-id'] || '--'}
                                    </div>
                                    <div>
                                        {u['state'] || '--'}
                                    </div>


                                </div>
                            )
                        })}


                    </Panel>
                </PanelWrapper>
                </PanelWrapper>
        );
        return html;
    }
}
// onClick={this.Store.update.bind(null, Account)}
StatusDashboard.contextTypes = {
    router: React.PropTypes.object,
    userProfile: React.PropTypes.object
};

StatusDashboard.defaultProps = {
    siteList: [],
    selectedSite: {}
}

export default SkyquakeComponent(StatusDashboard);