import '../css/MobileSidebar.css'

import Home from "../icons/Home.jsx"
import Person from "../icons/Person.jsx"
import Search from "../icons/SearchIcon.jsx"

import Cookies from "js-cookie"
import { config, signedIn } from "../main.jsx"
import Wrong2 from '../icons/Wrong2.jsx'
import { useNavigate } from 'react-router'

function HajeeberButton(props) {
	const {size, navigate} = props;

	if (signedIn()) {
		return <>
			<button onClick={() => {
				if (signedIn()) {
					navigate("/profile");
				} else {
					navigate("/login");
				}
			}}>
				<img src={`${config.serverURL + "/account/myself/picture"}`} width={size} height={size}></img>
				hajeeber
			</button>
		</>
	} else {
		return <>
			<button onClick={() => {
				if (signedIn()) {
					navigate("/profile");
				} else {
					navigate("/login");
				}
			}}>
				<Person size={size} />
				hajeeber
			</button>
		</>
	}
}

function LogOutButton(props) {
	const size = props.size;

	if(signedIn()) {
		return <>
			<li>
				<button onClick={logOut}>
					<Wrong2 size={size} />
					log out
				</button>
			</li>
		</>
	} else {
		return
	}
}

function logOut() {
	Cookies.remove("token");
	window.location.reload();
}

function MobileSidebar() {
	let size = 40;
	let navigate = useNavigate();

	return (
		<>
			<div className="sidebar-container">
				<ul className="mobile-sidebar">
					<li>
						<button onClick={() => {
							navigate("/");
						}}>
							<Home size={size} />
							home
						</button>
					</li>

					<li>
						<button>
							<Search size={size} />
							search
						</button>
					</li>

					<li>
						<button>
							<Person size={size} />
							friends
						</button>
					</li>

					<li>
						<HajeeberButton size={size} navigate={navigate} />
					</li>

					<LogOutButton size={size} />
				</ul>
			</div>
		</>
	)
}


export default MobileSidebar