import React from 'react';
import { Link, useLocation } from "react-router-dom";

import "../App.css"
import "./sidebar.css";
import logo from "../imgs/logo.png"
import img1 from "../imgs/1.png"
import img2 from "../imgs/2.png"
import img3 from "../imgs/3.png"
import img4 from "../imgs/4.png"
import img5 from "../imgs/5.png"
import img6 from "../imgs/6.png"
import img7 from "../imgs/7.png"
import img8 from "../imgs/8.png"
import img9 from "../imgs/9.png"
import Login from "./login.js"

export default function Sidebar() {

// Locks search button for 300ms before it can be clicked again, prevents spam
const [isLocked, setIsLocked] = React.useState(false);
function HandleLock(arg) {
if (!isLocked) {
    setIsLocked(true);
        setTimeout(() => setIsLocked(false), 300);
    SidebarHide(arg)
    }
}


// Clicked buttons
function SidebarClick(x){
const btn = document.querySelectorAll("button");

if(sidebar===1){setSidebar(0);SidebarHide()}

btn.forEach((e,i) =>{
    btn[i].style.backgroundColor="inherit"
}) 
btn[x].style.backgroundColor="#202232"

}


// The menu button
const [sidebar, setSidebar] = React.useState();

function SidebarHide(){
const btn   = document.querySelectorAll("button");
const span  = document.querySelectorAll("button>span");
const side  = document.querySelector("#sidebar-list");
const login = document.querySelectorAll(".login>button")[1];

if(sidebar===1){
    setSidebar(0)
    side.style.width="320px"
    btn.forEach((e, i) =>{
        e.style.width="310px"
        setTimeout(() => {
            span[i].style.opacity="1"
            login.style.opacity="1"

        }, 100)
    })
    side.style.zIndex="2"
} else {
    side.style.width="40px";
    setSidebar(1)
    btn.forEach((e,i) =>{
        e.style.width="40px"
        span[i].style.opacity="0"
    }) 
    login.style.opacity="0"
    setTimeout(() => {
        side.style.zIndex="0"
    }, 300);
    }
}

// Links
const location = useLocation()
React.useEffect(()=>{
    if(location.pathname==="/"){SidebarClick(1)}
    if(location.pathname.includes("news")){SidebarClick(2)}
    if(location.pathname.includes("records")){SidebarClick(3)}
    if(location.pathname.includes("leaderboards")){SidebarClick(4)}
    if(location.pathname.includes("discussions")){SidebarClick(5)}
    if(location.pathname.includes("scorelog")){SidebarClick(6)}
    if(location.pathname.includes("profile")){SidebarClick(7)}
    if(location.pathname.includes("rules")){SidebarClick(9)}
    if(location.pathname.includes("about")){SidebarClick(10)}

    // console.log(location.pathname)
    // eslint-disable-next-line react-hooks/exhaustive-deps
},  [location])


return (
    <div id='sidebar'>
        <div id='logo'> {/* logo */}
            <img src={logo} alt="" height={"80px"}/>
            <div id='logo-text'>
                <span><b>PORTAL 2</b></span><br/>
                <span>Least Portals</span>
            </div>
        </div>
        <div id='sidebar-list'> {/* List */}
            <div id='sidebar-toplist'> {/* Top */} 
                <button onClick={()=>HandleLock()}><img src={img1} alt="" /><span>Search</span></button>
                <span></span>
                
                <Link to="/" tabIndex={-1}>
                    <button><img src={img2} alt="" /><span>Home&nbsp;Page</span></button>
                </Link>

                <Link to="/news" tabIndex={-1}>
                    <button><img src={img3} alt="" /><span>News</span></button>
                </Link>

                <Link to="/records" tabIndex={-1}>
                    <button><img src={img4} alt="" /><span>Records</span></button>
                </Link>

                <Link to="/leaderboards" tabIndex={-1}>
                    <button><img src={img5} alt="" /><span>Leaderboards</span></button>
                </Link>

                <Link to="/discussions" tabIndex={-1}>
                    <button><img src={img6} alt="" /><span>Discussions</span></button>
                </Link>

                <Link to="/scorelog" tabIndex={-1}>
                    <button><img src={img7} alt="" /><span>Score&nbsp;Logs</span></button>
                </Link>
            </div>
            <div id='sidebar-bottomlist'>
                <span></span>

                <Login/>

                <Link to="/rules" tabIndex={-1}>
                    <button><img src={img8} alt="" /><span>Leaderboard&nbsp;Rules</span></button>
                </Link>

                <Link to="/about" tabIndex={-1}>
                    <button><img src={img9} alt="" /><span>About&nbsp;P2LP</span></button>
                </Link>
            </div>
        </div>
        <div> 
            <input type="text" placeholder='Search for map or a player...'/>
        </div>
    </div>
        )
}