// Html page
import "file-loader?name=[name].[ext]!../index.html"

// Import default image
import "file-loader?name=img/[name].png!../img/noimage.png"

// Import favicon settings
import "file-loader?name=[name].png!../img/apple-touch-icon.png"
import "file-loader?name=[name].png!../img/favicon-16x16.png"
import "file-loader?name=[name].png!../img/favicon-32x32.png"
import "file-loader?name=[name].png!../img/favicon.ico"
import "file-loader?name=[name].png!../img/safari-pinned-tab.svg"

// Styles
import "../less/app.less"

// React
import React from "react"
import ReactDOM from "react-dom"
import { bindActionCreators } from "redux"
import { Provider, connect } from "react-redux"
import { Router } from "react-router"

// Action creators
import { dismissAlert } from "./actions/alerts"

// Store
import store, { history } from "./store"

// Components
import NavBar from "./components/navbar"
import Alert from "./components/alerts/alert"

// Routes
import getRoutes from "./routes"

function mapStateToProps(state) {
  let torrentCount = 0;
  if (state.torrentStore.has("torrents") && state.torrentStore.get("torrents") !== undefined) {
    torrentCount = state.torrentStore.get("torrents").size;
  }
  return {
    username: state.userStore.get("username"),
    isAdmin: state.userStore.get("isAdmin"),
    isActivated: state.userStore.get("isActivated"),
    torrentCount: torrentCount,
    alerts: state.alerts,
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ dismissAlert }, dispatch);
}

function Main(props) {
  return (
    <div>
      <NavBar
        username={props.username}
        isAdmin={props.isAdmin}
        isActivated={props.isActivated}
        router={props.router}
        torrentCount={props.torrentCount}
      />
      <Alert
        alerts={props.alerts}
        dismissAlert={props.dismissAlert}
      />
      <div className="container-fluid">
        {props.children}
      </div>
    </div>
  );
}
export const App = connect(mapStateToProps, mapDispatchToProps)(Main);

ReactDOM.render((
  <Provider store={store}>
    <Router history={history} routes={getRoutes(App)} />
  </Provider>
),document.getElementById("app"));