'use strict';

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Switch, IndexRoute, browserHistory} from 'react-router';
import {Provider, Store, Global} from 'sbx-react-core';

import Sound from 'sbx-react-sound';

import Layout from 'layouts/layout';
import ChartLayout from 'layouts/ChartLayout';
import RouteLayout from 'layouts/RouteLayout';
import SignIn from 'layouts/SignIn';
import SignUp from 'layouts/SignUp';

// Containers
import Main from 'containers/Main';
import NotFound from 'containers/NotFound/Notfound';
import Header from 'containers/Header';
import Settings from 'containers/Settings';
import Account from 'containers/Account';

import Loader from 'components/Loader';

//actions
import {getMarketsInfo} from 'actions/Market';
import {getSelf} from 'actions/Profile';

import Events from "actions/Events";

window.s = Store;
window.g = Global;

__config.domain = window.location.hostname;

Global.activeLots = {};

Store.set({
    feed: {},
    connected: {
        feed: false,
        user: false
    },
    balance: {},
    profile: {},
    initial: false,
    tokens: {},
    settings: {
        sound: 1,
        theme: 'dark',
        lang: 'en',
        serverUTCTimeOffset: 0,
        activeAssets: [],
        templates: {},
        confirmations: {
            close: true,
            close_all: true,
            close_group: true,
            double: true,
            modify: true,
            open: true,
            reverse: true
        },
        ...__config.settings
    },
    utc_time: Intl.DateTimeFormat().resolvedOptions().timeZone || 'Europe/London',
    utc_offset: new Date().getTimezoneOffset() / 60 * -1,
    assets: {},
    alerts: [],
    groups: [],
    openOrders: [],
    pendingOrders: [],
    ordersHistory: []
});

new Sound({
    get volume() {
        return Store.get(['settings','sound']);
    },
    sounds: {
        info: new Audio(require('./assets/sounds/sound_make_deal.ogg')),
        error: new Audio(require('./assets/sounds/sound_deal_loose_notification.ogg')),
        success: new Audio(require('./assets/sounds/success.ogg')),
        click: new Audio(require('./assets/sounds/sound_click.ogg')),
        sent: new Audio(require('./assets/sounds/sent.mp3')),
        tab: new Audio(require('./assets/sounds/sound_tab_switch.ogg')),
        message: new Audio(require('./assets/sounds/message.mp3'))
    }
});


const Initial = Store.select('initial');

@Provider({
    connected: ['connected'],
    profile: ['profile'],
    theme: ['settings','theme'],
    lang: ['settings','lang'],
    initial: ['initial']
})

class App extends Component {
    constructor(props) {
        super(props);

        Promise.all([
            getSelf(),
            getMarketsInfo()
        ]).then(() => {
            Events.subscribeAll();
        }).finally(()=>{
            Initial.set(true);
        })
    }

    isLogin(nextState, replace, next) {
        let {profile} = this.props;
        console.log('@profile',profile);
        if(profile.id) {
            next();
        } else {
            return browserHistory.push('/en/sign-in');
        }
    }

    componentDidMount() {
        const { theme } = this.props;
        document.body.classList.add(theme);
    }

    componentWillReceiveProps(nextProps, nextContext) {
        if(nextProps.theme !== this.props.theme) {
            if(nextProps.theme === "light") {
                document.body.classList.remove("dark");
                document.body.classList.add("light");
            }
            if(nextProps.theme === "dark") {
                document.body.classList.remove("light");
                document.body.classList.add("dark");
            }
        }
    }

    render() {
        let {initial,theme} = this.props;

        if(!initial) return <Loader theme={theme}/>;

        return (
                <Router history={browserHistory}>
                    <Route path="/:language/sign-in" component={SignIn}></Route>
                    <Route path="/:language/sign-up" component={SignUp}></Route>

                    <Route path="/:language/platform" component={Layout} onEnter={this.isLogin.bind(this)}>
                        <IndexRoute
                            components={{
                                main: Main,
                                header: Header
                            }}
                        />
                        <Route path="cabinet">
                            <Route
                                path="settings"
                                components={{
                                    header: Header,
                                    main: props => <RouteLayout>
                                        <Settings {...props}/>
                                    </RouteLayout>
                                }}
                            />
                            <Route
                                path="account"
                                components={{
                                    header: Header,
                                    main: props => <RouteLayout>
                                        <Account {...props}/>
                                    </RouteLayout>
                                }}
                            />
                            <Route
                                path="withdrawals"
                                components={{
                                    header: Header,
                                    main: props => <RouteLayout>
                                        <div></div>
                                    </RouteLayout>
                                }}
                            />
                            <Route
                                path="transactions-history"
                                components={{
                                    header: Header,
                                    main: props => <RouteLayout>
                                        {/*<TransactionsHistory {...props} />*/}
                                    </RouteLayout>
                                }}
                            />
                        </Route>
                            <Route path="chart/:symbol"
                                   components={{
                                       main: props => <ChartLayout {...props}/>
                                   }}
                            />
                        <Route path="*" components={{main: NotFound}}/>
                    </Route>
                </Router>
        );
    }
}


ReactDOM.render(<App/>, document.getElementById('root'));