import { h } from 'preact';
import { route } from 'preact-router';
import { useSelector, useDispatch } from 'react-redux'

import http from './../http';
import { State, userState } from './../store';

const Header = () => {
    const dispatch = useDispatch()
    const user = useSelector((state: State) => state.user);

    async function logoutClick(e) {
        e.preventDefault();
        await http.postLogout();
        route('/login');
        dispatch(userState.actions.set(null));
    }

    const nav = () => (
        <nav>
            <a href="/">Offers</a>
            <a href='/list'>List</a>
            <a href="/search">Search</a>
        </nav>
    );

    const anonNav = () => (
        <nav>
            <a href="/login">Login</a>
            <a href="/register">Register</a>
        </nav>
    );

    const adminNav = () => (
        <nav>
            <a href="/bundles">Bundles</a>
            <a href='/offers/acp'>Offers ACP</a>
        </nav>
    )

    const userNav = () => (
        <nav>
            <a href="/account">Account</a>
            <a href="/auth/logout" onClick={logoutClick}>Logout</a>
        </nav>
    )

    return (
        <header>
            {user ? nav() : anonNav()}
            {user ? adminNav() : null}
            {user ? userNav() : null}
        </header>
    );
}

export default Header;