import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { AnimatedSwitch } from 'react-router-transition';
import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./reducers";
import Unsplash from 'unsplash-js';

import Home from "./components/Home";
import UnsplashImage from "./components/UnsplashImage";
import style from "./styles/Main.scss";

const unsplashAuth = new Unsplash({
    applicationId: "<KEY>",
    secret: "<KEY>",
    callbackUrl: "/",
    headers: {
        "Authorization": "Client-ID <KEY>"
    }
});

const store = createStore(rootReducer);
store.dispatch({
    type: "SET_UNSPLASH",
    object: unsplashAuth
});

ReactDOM.render(
	<Provider store={store}>
		<Router basename="/tspaulding0222.github.io-react">
			<AnimatedSwitch
                atEnter={{ opacity: 0 }}
                atLeave={{ opacity: 0 }}
                atActive={{ opacity: 1 }}
                className="switch-wrapper"
            >
				<Route exact path="/" component={Home} />
				<Route path="/image" component={UnsplashImage} />
			</AnimatedSwitch>
		</Router>
	</Provider>,
	document.getElementById("app")
);
