import { Outlet, Navigate, NavLink } from 'react-router-dom'
import { isLoggedIn, LoginState, usePersistentState } from '../authorization'

const activeClassName: ({ isActive }: { isActive: boolean }) => string = ({ isActive }) => isActive ? "active" : ""

export function Layout() {
    const [collapsed, setCollapsed] = usePersistentState("collapsed", false)
    return (
        <div>
            {
                isLoggedIn() === LoginState.No && <Navigate to="/login" replace={true} />
            }
            <div id="sidebar" className={collapsed ? "collapse" : ""}>
                <label id="collapse">
                    <input type="checkbox" checked={collapsed} onChange={e => setCollapsed(e.target.checked)} />
                    <div className="button">yo</div>
                </label>
                <div className="menu">
                    <NavLink className={activeClassName} to="/"><span className="item">Dashboard</span></NavLink>
                    <NavLink className={activeClassName} to="/bots"><span className="item">Bots</span></NavLink>
                    <NavLink className={activeClassName} to="/tokens"><span className="item">Tokens</span></NavLink>
                    <NavLink className={activeClassName} to="/settings"><span className="item">Settings</span></NavLink>
                    <NavLink className={activeClassName} to="/logout"><span className="item important">Logout</span></NavLink>
                    <NavLink className={activeClassName} to="/404"><span className="item">(temp) 404</span></NavLink>
                </div>
            </div>
            <div id="content">
                <Outlet />
            </div>
        </div>
    )
}