import React from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import siteLinks from '../../../links/siteLinks'
import { IoIosArrowDown } from 'react-icons/io'
export default function UserMenu() {

    const {pathname} = useLocation()
    const navigate = useNavigate()

    const logout = () => {
        localStorage.clear()
        navigate(siteLinks.login, {replace: true})
        window.location.reload()
    }

    return (
        <>
            <div className="sidebar-nav scrollbar scroll_dark">
                <ul className="metismenu h-100" id="sidebarNav">
                    <li className="nav-static-title">Panel</li>
                    <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}>
                        <Link className="has-arrow" to='#' data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <i className="nav-icon ti ti-home"></i>
                            <div className='d-flex gap-2 justify-content-between align-items-center'>
                                <span className="nav-title">Dashboard</span>
                                <IoIosArrowDown />
                            </div>
                            {/* <span className="nav-label label label-danger">9</span> */}
                        </Link>
                        <ul id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-bs-parent="#sidebarNav">
                            <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}><Link to={siteLinks.dash}>Home</Link></li>
                            <li className={`${pathname == siteLinks.calendar ? 'active' : ''}`}><Link to={siteLinks.calendar}>Calendar</Link></li>
                            <li className={`${pathname == siteLinks.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Sites Contacts</Link></li>
                            <li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Comments</Link></li>
                        </ul>
                    </li>
                    <li className={`${pathname == siteLinks.reports ? 'active' : ''}`}>
                        <Link to={siteLinks.reports} aria-expanded="false"><i className="nav-icon ti ti-comment">
                            </i><span className="nav-title">Reports</span>
                        </Link>
                    </li>
                    <li className={`${pathname == siteLinks.error ? 'active' : ''}`}>
                        <Link className="has-arrow" to='#' data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <i className="nav-icon ti ti-calendar"></i>
                            <div className='d-flex gap-2 justify-content-between align-items-center'>
                                <span className="nav-title">Account</span>
                                <IoIosArrowDown />
                            </div>
                        </Link>
                        <ul id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-bs-parent="#sidebarNav">
                            <li className={`${pathname == siteLinks.my_media ? 'active' : ''}`}><Link to={siteLinks.my_media}>Files and Media</Link></li>
                            <li className={`${pathname == siteLinks.subscription ? 'active' : ''}`}><Link to={siteLinks.subscription}>Subscription</Link></li>
                            <li className={`${pathname == siteLinks.settings ? 'active' : ''}`}><Link to={siteLinks.settings}>Settings</Link></li>
                        </ul>
                    </li>


                    <li className="sidebar-banner p-4 bg-gradient text-center m-3 mt-auto d-block rounded">
                        <h5 className="text-white mb-1">MERMS Panel</h5>
                        <Link className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" to='' onClick={logout}> Log Out</Link>
                    </li>
                </ul>
            </div>
        </>
    )
}