import logo from './images/krakenLogo2.png';
import logoFooter from './images/krakenBlue.png';
import './App.css';
import { Provider, connect } from 'react-redux';
import { useState, useCallback, useEffect } from 'react';
import {Router, Route, Link, Redirect, Switch} from 'react-router-dom';
import createHistory from "history/createBrowserHistory";
import { createBrowserHistory } from "history";
import BodyWrapper from './components/FrontArchitecture/BodyWrapper/BodyWrapper';
import Header from './components/Header/Header';
import Main from './components/FrontArchitecture/Main/Main';
import Footer from './components/Footer/Footer';
import Registration from './components/Registration/Registration';
import { store } from './requests/reducers';
import { uploadFile, uploadFiles } from './basic/uploadFilesFunc';
import { CBasic } from './basic/dropZone';
import Gallery from './components/Carusell/Carusell';
import CPageRoute from './components/Routing/Routing';


export let history = createBrowserHistory();


console.log(store.getState())
store.subscribe(() => console.log(store.getState()))

function App() {
  const [open, setOpen] = useState(false);
  useEffect(() => { store.getState().auth.token? setOpen(true) : setOpen(false) }, [])
 
  return (
      // <Router history={history}>
    <Provider store={store}>
   {/* <CPageRoute> */}
      {!open && <Registration/>}
         {open && <BodyWrapper >
        <Header>
            <img src={logo} className="App-logo" alt="logo" />
          </Header>
        <Main>
       {/* <CMainAds></CMainAds> */}
          {/* <CBasic onLoad={uploadFile}></CBasic> */}
          {/* <CAd onLoad={uploadFiles}></CAd> */}
          <Gallery />
        </Main>
       <Footer>
          <img src={logoFooter} className="footer-logo" alt="logo" />
        </Footer>
        </BodyWrapper>}
         {/* </CPageRoute> */}
    </Provider>
  // </Router >
  )
}

export default App;