import '../css/DesktopSidebar.css'
import logo from '../assets/hajeebtok.png'
import tiny_logo from '../assets/logo.png'

import Home from "../icons/Home.jsx"
import Compass from "../icons/Compass.jsx"
import Grandpa from "../icons/Grandpa.jsx"
import Person from "../icons/Person.jsx"
import Phone from "../icons/Phone.jsx"
import Search from "../icons/Search.jsx"
import Wrong2 from "../icons/Wrong2.jsx"

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

function search(minimized, navigate) {

    if (minimized) {
        navigate("/search");
        return;
    }

    // goto search page with search query
    navigate("/search"); // todo make it take the search query
}

function HajeeberButton(props) {
    const {size, minimized, 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>
                {!minimized && 'my hajeeber'}
            </button>
        </>
    } else {
        return <>
            <button onClick={() => {
                if(signedIn()) {
                    navigate("/profile");
                } else {
                    navigate("/login");
                }
            }}>
                <Person size={size} />
                {!minimized && 'my hajeeber'}
            </button>
        </>
    }
}

function LogOutButton(props) {
    const { size, minimized } = props;

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

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

function DesktopSidebar(props) {
    const minimized = props.minimized;
    let navigate = useNavigate();

    let size = 40;
    let sidebarCode = <>
        <div
            className="sidebar"
            style={{ minWidth: minimized ? "150px" : "350px" }}
        >
            <div className="top">
                <img src={minimized ? tiny_logo : logo} style={{ width: minimized ? "100px" : "250px" }} alt="logo" />
            </div>

            <ul className="middle">
                <div className="searchContainer" style={{ width: minimized ? "100px" : "250px" }}>
                    <button className="searchButton" onClick={() => {search(minimized, navigate)}}>
                        <Search size={size} />
                    </button>
                    {!minimized && <input type="text" placeholder="Search" className="searchBar" />}
                </div>

                <li>
                    <button onClick={() => {
                        navigate("/");
                    }}>
                        <Home size={size} />
                        {!minimized && 'home'}
                    </button>
                </li>

                <li>
                    <button>
                        <Compass size={size} />
                        {!minimized && 'explore'}
                    </button>
                </li>

                <li>
                    <button>
                        <Grandpa size={size} />
                        {!minimized && 'following'}
                    </button>
                </li>

                <li>
                    <button>
                        <Person size={size} />
                        {!minimized && 'friends'}
                    </button>
                </li>

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

                <LogOutButton size={size} minimized={minimized} />

                <li>
                    <button>
                        <Phone size={size} />
                        {!minimized && 'contact'}
                    </button>
                </li>
            </ul>

            <div className="bottom">
                <p>{!minimized && 'developer by buttplugstudios.xyz'}</p>
            </div>
        </div>
    </>

    return sidebarCode;
}

export default DesktopSidebar
