import { h } from 'preact';
import { useEffect } from 'preact/hooks';
import { useDispatch, Provider } from 'react-redux'
import { Route, Router, } from 'preact-router';
import LogRocket from 'logrocket';

import createWs from './ws';
import store, {  wsState } from './store'

import Nav from './components/nav';

import Offers from './routes/offers';
import Acp from './routes/acp';
import Login from './routes/login';
import Search from './routes/search';
import List from './routes/list';
import Info from './routes/info';

if (window.location.host === 'matescrates.au') LogRocket.init('yh0dy3/mcrates');

const Main = () => {
    const dispatch = useDispatch();

    // i have no idea why this is needed,
    // but it makes sure the user changes actually rerender
    useEffect(() => {
        const ws = createWs(dispatch);
        ws.connect();
        dispatch(wsState.actions.set(ws));
    }, [dispatch])

    function routeChange(e) {
        const { ws } = store.getState();
        if (!ws) return null;
        if (e.url === '/acp') return ws.sendAcpOffers();
    }

    return (
        <main id="app">
            <Nav />
            <Router onChange={routeChange}>
                <Route path="/" component={Offers} />
                <Route path="/login" component={Login} mode="login" />
                <Route path="/register" component={Login} mode="register" />
                <Route path="/search" component={Search} />
                <Route path="/list" component={List} />
                <Route path="/info" component={Info} />

                {/* ACP */}
                <Route path="/acp" component={Acp} />
            </Router>
        </main>
    );
};

const App = () => {
    return (
        <Provider store={store}>
            <Main />
        </Provider>
    );
}

export default App;