/* @flow */
'use strict';

import * as React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Route, withRouter } from 'react-router-dom';

import Header from '../common/Header';
import Footer from '../common/Footer';
import AccountTabs from './account/AccountTabs';
import DeviceSettingsTabs from './account/DeviceSettingsTabs';
import AsideContainer from './aside';
import ModalContainer from '../modal';
import Notifications from '../common/Notification';
import Log from '../common/Log';

import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import type { State, Dispatch } from '../../flowtype';

type WalletContainerProps = {
    wallet: $ElementType<State, 'wallet'>,
    children?: React.Node
}

type ContentProps = {
    children?: React.Node
}


const Content = (props: ContentProps) => {
    return (
        <article>
            <nav>
                <Route path="/device/:device/network/:network/account/:account" component={ AccountTabs } />
                <Route path="/device/:device/device-settings" component={ DeviceSettingsTabs } />
            </nav>
            <Notifications />
            <Log />
            { props.children }
            <Footer />
        </article>
    );
}

const Wallet = (props: WalletContainerProps) => {
    return (
        <div className="app">
            <Header />
            {/* <div>{ props.wallet.online ? "ONLINE" : "OFFLINE" }</div> */}
            <main>
                <AsideContainer />
                <Content>
                    { props.children }
                </Content>
            </main>
            <ModalContainer />
        </div>
    );
}

const mapStateToProps: MapStateToProps<State, {}, WalletContainerProps> = (state: State, own: {}): WalletContainerProps => {
    return {
        wallet: state.wallet
    };
}

export default withRouter(
    connect(mapStateToProps, null)(Wallet)
);