import { memo, useCallback } from 'react';
import { Link, useNavigate } from 'react-router-dom';

import Icon from './Icon';
import { UserLink } from './UserInfo';
import SearchBox from './SearchBox';
import { useVisitor } from './VisitorContext';

function Header() {
    const [visitor] = useVisitor();
    const navigate = useNavigate();
    /**
     * @param {string} searchString
     */
    let searchAll = useCallback((searchString) => {
        let location = {};
        location.pathname = '/discover';
        location.search = `?search=${searchString}`;
        navigate(location);
    }, [navigate]);
    return (
        <div id="header">
            <div id="header_wrapper">
                {
                    visitor.uid < 0 ?
                        <>
                            <div id="logo"><a href="/" /></div>
                            <nav id="global">
                                <a href="/">Loading...</a>
                            </nav>
                        </>
                        : visitor.uid > 0 ?
                            <UserLink user={visitor} />
                            : <div id="logo">
                                <Link to="/">Juick</Link>
                            </div>
                }
                {
                    visitor.uid >= 0 &&
                    <>
                        <div id="search" className="desktop">
                            <SearchBox onSearch={searchAll} />
                        </div>
                        <nav id="global">
                            {visitor.uid > 0 ?
                                <Link to={{ pathname: '/' }}>
                                    <Icon name="ei-bell" size="s" /><span className="desktop">Discuss</span>
                                    {
                                        visitor.unreadCount &&
                                        <span className="badge">{visitor.unreadCount}</span>
                                    }
                                </Link>
                                :
                                <Link to='/?media=1' rel="nofollow">
                                    <Icon name="ei-camera" size="s" />
                                    <span className="desktop">Photos</span>
                                </Link>
                            }
                            <Link to={{ pathname: '/discover' }} rel="nofollow">
                                <Icon name="ei-search" size="s" />
                                <span className="desktop">Discover</span>
                            </Link>

                            {visitor.uid > 0 ?
                                <Link to={{ pathname: '/post' }}>
                                    <Icon name="ei-pencil" size="s" />
                                    <span className="desktop">Post</span>
                                </Link>
                                :
                                <Link to={{ pathname: '/login', state: { retpath: window.location.pathname } }}>
                                    <Icon name="ei-user" size="s" />
                                    <span className="desktop">Login</span>
                                </Link>
                            }
                        </nav>
                    </>
                }
            </div>
        </div>
    );
}

export default memo(Header);