/* eslint-disable @next/next/no-img-element */
import Link from 'next/link';
import { useRouter } from 'next/router';
import Offcanvas from 'react-bootstrap/Offcanvas';
import { signOut } from 'next-auth/react';

export default function SideBar(props: { show: any; handleClose: any }) {
  const location = useRouter();
  const { pathname } = location;
  const splitLocation = pathname.split('/');
  console.log(splitLocation);

  return (
    <>
      <Offcanvas
        show={props.show}
        onHide={props.handleClose}
        backdrop={false}
        scroll={true}
        responsive={'xl'}
        className="main_sidebar"
      >
        <Offcanvas.Header closeButton></Offcanvas.Header>
        <Offcanvas.Body>
          <Link href="/" className="logo text-center">
            <img src="/images/wowlogo.svg" alt="" />
          </Link>
          <div className="menu">
            <ul className="list">
              <li className={splitLocation[2] === undefined ? 'active' : ''}>
                <Link href={'/carrier'}>
                  <i className="icon-Path-4012"></i> Home
                </Link>
              </li>
              <li className={splitLocation[2] === 'profile' ? 'active' : ''}>
                <Link href={'/carrier/profile'}>
                  <i className="icon-Path-4014"></i> Profile
                </Link>
              </li>
              <li className={splitLocation[2] === 'my-order' ? 'active' : ''}>
                <Link href={'/carrier/my-order'}>
                  <i className="icon-Icon-material-event-note1"></i> My Orders
                </Link>
              </li>
              <li className={splitLocation[2] === 'technician' ? 'active' : ''}>
                <Link href={'/carrier/technician'}>
                  <i className="icon-Group-1854"></i> Technician
                </Link>
              </li>
              <li className={splitLocation[2] === 'request' ? 'active' : ''}>
                <Link href={'/carrier/request'}>
                  <i className="icon-list_paper_school_text_icon"></i> Request
                </Link>
              </li>
              <li className={splitLocation[2] === 'messages' ? 'active' : ''}>
                <Link href={'/carrier/messages'}>
                  <i className="icon-Icon-material-message1"></i> Messages
                </Link>
              </li>
              <li className={splitLocation[2] === 'reports' ? 'active' : ''}>
                <Link href={'/carrier/reports'}>
                  <i className="icon-Group-754"></i> Reports
                </Link>
              </li>
              <li className={splitLocation[2] === 'rating-reviews' ? 'active' : ''}>
                <Link href={'/carrier/rating-reviews'}>
                  <i className="icon-Path-4017"></i> Rating & Reviews
                </Link>
              </li>
              <li className={splitLocation[2] === 'my-earnings' ? 'active' : ''}>
                <Link href={'/carrier/my-earnings'}>
                  <i className="icon-Group-1855"></i> My Earning
                </Link>
              </li>
              <li className={splitLocation[2] === 'settings' ? 'active' : ''}>
                <Link href={'/carrier/settings'}>
                  <i className="icon-Group-1856"></i> Settings
                </Link>
              </li>
              <li

                className="logout"
               style={{ cursor: 'pointer' }}
              >
                <i className="icon-Icon-metro-exit1"></i> Logout
              </li>
            </ul>
          </div>
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}