import './App.scss';
import 'bootstrap/dist/css/bootstrap.css';

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';

import Router from './Router';
import ScrollToTop from './shared/components/ScrollToTop';
import { AppState } from './store';
import { fetchUser, logHelloWorld } from './store/auth/actions';
import { INITIAL_AUTH_STATE } from './store/auth/reducers';
import { AuthState } from './store/auth/types';

interface AppProps {
  auth: AuthState;
  logHelloWorld: typeof logHelloWorld;
  fetchUser: any // Thunk Methods must be set to type any
}
interface AppComponentState {
  loaded: boolean;
  loading: boolean;
}
class App extends Component<AppProps,AppComponentState> {
  static defaultprops = { auth: INITIAL_AUTH_STATE }

  state = {
    loading: true,
    loaded: false,
  }
  
  UNSAFE_componentWillMount() {
        this.props.logHelloWorld();
        this.props.fetchUser('Fake User Id');
  }
  
  componentDidMount() {
    window.addEventListener('load', () => {
      this.setState({ loading: false });
      setTimeout(() => this.setState({ loaded: true }), 500);
    });
  }

  render() {
    const { loaded, loading } = this.state;
    return (
        <BrowserRouter>
          <ScrollToTop>
            <Fragment>
              {!loaded
              && (
              <div className={`load${loading ? '' : ' loaded'}`}>
                <div className="load__icon-wrap">
                  <svg className="load__icon">
                    <path fill="#4ce1b6" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
                  </svg>
                </div>
              </div>
              )
              }
              <div>
                <Router />
              </div>
            </Fragment>
            </ScrollToTop>
        </BrowserRouter>
    );
  }
}

const mapStateToProps = (state: AppState) => ({
    auth: state.auth
});

const mapDispathToProps = {
  logHelloWorld,
  fetchUser
}

export default connect(mapStateToProps, mapDispathToProps)(App);