import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
import { useSelector } from "react-redux";
export const GenericSidebar = ({ isRoute }) => {
  const router = useRouter();
  const { loadedUser, error } = useSelector(state => state.loadedUser);
  const VenderRoutes = () => {
    return (
      <ul>
        <li className={router.pathname === "/vendor/dashboard" ? "active" : ""}>
          <Link href="/vendor/dashboard">
            <span className="d-flex cursor-pointer">
              <Image className="" alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" />
              <div className="mx-2">Dashboard</div>
            </span>
          </Link>
        </li>
        {loadedUser && loadedUser.approved == "approved" && (
          <li className={router.pathname === "/vendor/activity-details" ? "active" : ""}>
            <Link href="/vendor/activity-details">
              <span className="d-flex cursor-pointer">
                <Image className="" alt="" width={25} height={18} src="/images/vendor/add-activity.svg" />
                <div className="mx-2">Add Activity</div>
              </span>
            </Link>
          </li>
        )}
        <li className={router.pathname === "/vendor/business-details" ? "active" : ""}>
          <Link href="/vendor/business-details">
            <span className="d-flex cursor-pointer">
              <Image className="" alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" />
              <div className="mx-2">Business Details</div>
            </span>
          </Link>
        </li>
        <li className={router.pathname === "/vendor/enquiries" ? "active" : ""}>
          <Link href="/vendor/enquiries">
            <span className="d-flex cursor-pointer">
              <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
              <div className="mx-2">Enquiries</div>
            </span>
          </Link>
        </li>
        <li className={router.pathname === "/vendor/activities" ? "active" : ""}>
          <Link href="/vendor/activities">
            <span className="d-flex cursor-pointer">
              <Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
              <div className="mx-2">Activities</div>
            </span>
          </Link>
        </li>
        <li className={router.pathname === "/vendor/reviews" ? "active" : ""}>
          <Link href="/vendor/reviews">
            <span className="d-flex cursor-pointer">
              <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
              <div className="mx-2">Reviews</div>
            </span>
          </Link>
        </li>
      </ul>
    );
  };
  const AdminRoutes = () => {
    return (
      <ul>
        <li className={router.pathname === "/admin/activities" ? "active" : ""}>
          <Link href="/admin/activities">
            <span className="d-flex cursor-pointer">
              <Image className="" alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
              <div className="mx-2">Activities</div>
            </span>
          </Link>
        </li>
        <li className={router.pathname === "/admin/vendors" ? "active" : ""}>
          <Link href="/admin/vendors">
            <span className="d-flex cursor-pointer">
              <Image className="" alt="" width={25} height={18} src="/images/admin/icon-user.svg" />
              <div className="mx-2">Vendor</div>
            </span>
          </Link>
        </li>
        <li className={router.pathname === "/admin/giftcards" ? "active" : ""}>
          <Link href="/admin/giftcards">
            <span className="d-flex cursor-pointer">
              <Image className="" alt="" width={22} height={15} src="/images/admin/icon-gift.svg" />
              <div className="mx-2">Gift Card</div>
            </span>
          </Link>
        </li>
        <li className={router.pathname === "/admin/reviews" ? "active" : ""}>
          <Link href="/admin/reviews">
            <span className="d-flex cursor-pointer">
              <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
              <div className="mx-2">Reviews</div>
            </span>
          </Link>
        </li>
        <li className={router.pathname === "/admin/contact-us-leads" ? "active" : ""}>
          <Link href="/admin/contact-us-leads">
            <span className="d-flex cursor-pointer">
              <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
              <div className="mx-2">Contact Us Leads</div>
            </span>
          </Link>
        </li>
        <li className={router.pathname === "/admin/enquiries" ? "active" : ""}>
          <Link prefetch href="/admin/enquiries">
            <span className="d-flex cursor-pointer">
              <Image alt="" width={22} height={15} src="/images/admin/icon-gift.svg" />
              <div className="mx-2">Enquiries</div>
            </span>
          </Link>
        </li>
      </ul>
    );
  };
  return (
    <div
      className="h-100 d-flex flex-column justify-content-between bg-z-primary primary-sidebar"
      style={{
        width: "15%",
        boxShadow: "8px 0px 16px -15px rgba(0,0,0,0.25)",
        "-webkit-box-shadow": "8px 0px 16px -15px rgba(0,0,0,0.25)",
        "-moz-box-shadow": "8px 0px 16px -15px rgba(0,0,0,0.25)"
      }}
    >
      {isRoute === "vendor" && <VenderRoutes />}
      {isRoute === "admin" && <AdminRoutes />}
      <div
        className="px-3 py-2"
        style={{
          borderInlineStart: "4px solid #393e49"
        }}
      >
        <p className="text-white m-0" style={{ fontSize: 16 }}>
          {isRoute === "admin" ? "Admin" : "Vendor"}
        </p>
      </div>
    </div>
  );
};