import React, { Component, Fragment } from "react";
import { Route, Router, Redirect } from "react-router-dom";
import { connect } from 'react-redux';
import { CartService } from './services';
import { ConfigService } from './services'

import { Header, Footer, DebugHeader } from "./shared";
import { Home, List, MyCoupons, Detail, SuggestedProductsList, Profile, ShoppingCart } from "./pages";

import "./i18n";
import "./main.scss";

import { createBrowserHistory } from "history";
import { ai } from "./services/telemetryClient";
// add appinsights
const history = createBrowserHistory({ basename: '' });
(async () => {
    await ConfigService.loadSettings();
    if (ConfigService._applicationInsightsIntrumentationKey) {
        ai.initialize(ConfigService._applicationInsightsIntrumentationKey, { history });
    }
})();

class App extends Component {
    constructor() {
        super();
        this.state = {
            shoppingCart: [],
            quantity: null,
        }
    }

    async componentDidMount() {
        if (this.props.userInfo.token) {
            const shoppingCart = await CartService.getShoppingCart(this.props.userInfo.token);
            if (shoppingCart) {
                this.setState({ shoppingCart });
            }
        }

        if (this.state.shoppingCart != null) {
            const quantity = this.state.shoppingCart.reduce((oldQty, { qty }) => oldQty + qty, 0);
            this.setState({ quantity })
        }
    }

    ShoppingCart = (quantity) => {
        this.setState({ quantity });
    }

    sumProductInState = () => {
        this.setState(prevState => {
            return { quantity: prevState.quantity + 1 }
        })
    }

    render() {
        const { quantity } = this.state;

        const PrivateRoute = ({ component: Component, ...rest }) => (
            <Route {...rest} render={(props) => (
                this.props.userInfo.loggedIn === true
                    ? <Component {...props} {...rest} />
                    : <Redirect to='/' />
            )} />
        )

        return (
            <div className="App">
                <Router history={history}>
                    <Fragment>
                        <DebugHeader />
                        <Header quantity={quantity} />
                        <Route exact path="/" component={Home} />
                        <Route exact path="/list" component={List} />
                        <Route exact path="/list/:code" component={List} />
                        <Route path="/suggested-products-list" component={SuggestedProductsList} />
                        <Route path="/product/detail/:productId" render={(props) => <Detail sumProductInState={this.sumProductInState} {...props} />} />
                        <PrivateRoute path='/coupons' component={MyCoupons} />
                        <PrivateRoute path='/profile' component={Profile} />
                        <PrivateRoute path='/shopping-cart' component={ShoppingCart} ShoppingCart={this.ShoppingCart} quantity={this.state.quantity} />
                        <Footer />
                    </Fragment>
                </Router>
            </div>
        );
    }
}

const mapStateToProps = state => state.login;

export default connect(mapStateToProps)(App);