import Link from "next/link";
import { useRouter } from "next/router";
import Image from "next/image";
import thumbgroup from "../../../public/images/thumborgs.svg";
import useAuthProvider from "@/useAuthProvider";
export default function Carrier() {
  const { asPath } = useRouter();
  const { Permission: userData } = useAuthProvider();
  let isActive = asPath.includes("/rate-quotes") ? "active" : "";

  const View = () => {
    if (userData?.ViewCustomerTab) {
      return <>
        <li
          className={`${asPath.includes("/Customer") ? "active" : ""}`}
        >
          <Link href="/Customer" aria-expanded="false">
            <span>
              <Image
                src={thumbgroup}
                style={{ width: "32px", height: "32px" }}
                alt=""
              />
            </span>
            <span className="nav-text">Customers</span>
          </Link>
        </li> </>
    }
}

  const CarrierUi = () => {
    return (
      <>
        <li className={`${asPath === "/dashboard" ? "active" : ""}`}>
          <Link href="/dashboard" aria-expanded="false">
            <span>
              <svg
                width="29"
                height="24"
                viewBox="0 0 29 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M0 24V0H28.723V24H0ZM1.86512 22.0957H26.8576V1.90493H1.86512V22.0957Z"
                  fill="#7D86A9"
                ></path>
                <path
                  d="M8.1674 11.2739L4.8125 14.8392V20.8554C4.8125 21.0246 4.94702 21.1623 5.113 21.1623H9.18638C9.35236 21.1623 9.48688 21.0249 9.48688 20.8554V11.6267L8.54751 11.2739H8.1674Z"
                  fill="#7D86A9"
                ></path>
                <path
                  d="M16.4642 14.07H12.3911C12.2248 14.07 12.0903 14.2074 12.0903 14.3769V20.855C12.0903 21.0246 12.2248 21.1623 12.3911 21.1623H16.4642C16.6302 21.1623 16.7647 21.0249 16.7647 20.855V14.3766C16.7647 14.2074 16.6302 14.07 16.4642 14.07Z"
                  fill="#7D86A9"
                ></path>
                <path
                  d="M22.3845 7.47056L21.6445 6.83908L18.9673 9.82174V20.855C18.9673 21.0242 19.1018 21.1619 19.2681 21.1619H23.3415C23.5075 21.1619 23.642 21.0245 23.642 20.855V7.57221C23.6253 7.58204 23.6102 7.59417 23.5932 7.60303C23.4375 7.68631 23.2625 7.73024 23.0866 7.73024C22.8294 7.73057 22.5809 7.63844 22.3845 7.47056Z"
                  fill="#7D86A9"
                ></path>
                <path
                  d="M3.81751 14.3795C3.97514 14.3795 4.13277 14.3163 4.25091 14.191L8.08513 10.1162L14.794 12.6372C15.0232 12.7228 15.2794 12.6595 15.4447 12.4759L21.6225 5.59352L23.0679 6.82763C23.1388 6.88796 23.2374 6.89845 23.3189 6.85517C23.4001 6.81157 23.4483 6.72271 23.44 6.62861L23.1266 3.05086C23.1157 2.92299 23.0049 2.82889 22.8801 2.84036L19.3765 3.15971C19.285 3.16791 19.2073 3.23217 19.1797 3.32168C19.1711 3.35119 19.1682 3.38168 19.1707 3.41152C19.1762 3.47185 19.2041 3.5289 19.2513 3.5689L20.6999 4.80531L14.8315 11.3431L8.13264 8.82569C7.90823 8.74208 7.65718 8.8011 7.49152 8.97618L3.38442 13.3405C3.15455 13.5851 3.16194 13.9733 3.40144 14.2081C3.51765 14.3225 3.66758 14.3795 3.81751 14.3795Z"
                  fill="#7D86A9"
                ></path>
              </svg>
            </span>
            <span className="nav-text">Dashboard</span>
          </Link>
        </li>
        
        {userData?.RateQuoteView ?
          <li className={isActive}>
          <Link href="/rate-quotes" aria-expanded="false">
            <span>
              <svg
                width="30"
                height="30"
                viewBox="0 0 30 30"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g clipPath="url(#clip0_97_1749)">
                  <path
                    d="M29.7592 12.4492C28.8853 7.77086 26.3717 4.21752 22.2402 1.90183C13.3858 -3.06127 2.23445 2.15921 0.280193 12.1284C-1.27273 20.0519 3.78191 27.8282 11.6647 29.6221C12.3688 29.7786 13.0893 29.8412 13.802 29.9483C13.8873 29.9616 13.971 29.9828 14.0555 30H15.9331C16.4807 29.9218 17.0283 29.8615 17.5759 29.7715C23.3605 28.8108 28.254 24.217 29.5667 18.506C29.7427 17.7393 29.8155 16.9499 29.9375 16.1715C29.9493 16.0933 29.9704 16.0205 29.9868 15.9454V14.0678C29.9109 13.528 29.8593 12.9835 29.7592 12.4492ZM14.9904 28.2421C7.70608 28.2421 1.77367 22.3144 1.75724 15.0207C1.74081 7.72705 7.68104 1.77509 14.9786 1.76414C22.2762 1.75319 28.2219 7.69654 28.2266 14.9965C28.2313 22.2964 22.2848 28.2444 14.9904 28.2421Z"
                    fill="#7D86A9"
                  ></path>
                  <path
                    d="M14.9901 3.58307C8.70015 3.58307 3.57667 8.70811 3.57276 14.9996C3.56884 21.2911 8.6892 26.4169 14.9799 26.4263C21.2706 26.4357 26.3964 21.3193 26.4121 15.0239C26.4277 8.72845 21.291 3.5815 14.9901 3.58307ZM15.001 24.6692C9.67649 24.6747 5.32987 20.332 5.32987 15.0051C5.32987 9.6782 9.67259 5.33627 14.9987 5.34018C20.3248 5.34409 24.644 9.66882 24.6558 14.9887C24.6675 20.3085 20.3287 24.6637 15.001 24.6692Z"
                    fill="#7D86A9"
                  ></path>
                  <path
                    d="M18.7781 15.8438C18.3409 15.2514 17.7438 14.796 17.0569 14.531C16.6791 14.3808 16.2832 14.2768 15.8835 14.1477V10.7437C16.8019 10.8408 17.5389 11.5542 17.632 12.4289C17.6537 12.6546 17.7601 12.8637 17.9298 13.0141C18.0995 13.1645 18.3198 13.245 18.5465 13.2394C18.7737 13.23 18.9882 13.1318 19.1437 12.9659C19.2993 12.7999 19.3834 12.5796 19.3781 12.3522C19.3715 12.0408 19.3187 11.7321 19.2217 11.4361C18.7867 10.1914 17.8315 9.50141 16.6298 9.09772C16.3849 9.01558 16.1299 8.96317 15.8725 8.8951C15.8725 8.59312 15.8725 8.3107 15.8725 8.02749C15.8662 7.47986 15.5056 7.09574 14.9986 7.09339C14.4917 7.09105 14.124 7.47595 14.117 8.02045C14.117 8.31226 14.117 8.60486 14.117 8.90606L13.8173 8.97334C13.0795 9.12832 12.3896 9.45834 11.806 9.9356C10.2413 11.2335 10.203 13.3536 11.7183 14.7078C12.329 15.2462 13.0746 15.6086 13.8752 15.7561C14.0747 15.796 14.1224 15.8696 14.1209 16.0589C14.113 17.0642 14.1209 18.0687 14.1162 19.074C14.1162 19.1366 14.1068 19.1999 14.1005 19.2758C14.0223 19.2555 13.9628 19.2453 13.9096 19.2258C13.0827 18.923 12.399 18.5099 12.3387 17.4898C12.3113 17.0274 11.8584 16.7231 11.396 16.763C10.8484 16.8107 10.5308 17.295 10.6192 17.9521C10.7475 18.9066 11.245 19.6404 11.9992 20.2092C12.6188 20.6746 13.3292 20.9359 14.1177 21.0822C14.1177 21.4124 14.1123 21.7144 14.1177 22.0156C14.1287 22.5327 14.5089 22.9184 15.0025 22.9137C15.2347 22.9102 15.4561 22.8153 15.6188 22.6497C15.7815 22.4841 15.8724 22.261 15.8717 22.0289C15.8788 21.7856 15.8827 21.5407 15.8717 21.2974C15.8631 21.1268 15.9218 21.0627 16.0923 21.0329C16.7858 20.9062 17.4408 20.6216 18.0067 20.2013C19.4861 19.0998 19.8147 17.2551 18.7781 15.8438ZM14.1068 14.01C13.4113 13.8089 12.8058 13.5226 12.4725 12.8513C12.2738 12.45 12.3262 12.0518 12.5703 11.688C12.9309 11.1498 13.4684 10.8822 14.1068 10.7132V14.01ZM17.2979 18.4646C16.9318 18.8956 16.4499 19.1303 15.885 19.2766V15.9908C16.5242 16.1582 17.0695 16.4321 17.4286 16.9852C17.7407 17.4624 17.6883 18.0038 17.2979 18.4646Z"
                    fill="#7D86A9"
                  ></path>
                </g>
                <defs>
                  <clipPath id="clip0_97_1749">
                    <rect width="29.9851" height="30" fill="white"></rect>
                  </clipPath>
                </defs>
              </svg>
            </span>
            <span className="nav-text">Rate Quotes</span>
          </Link>
        </li>:""}
        
        {View()}
      
        
      </>
    );
  };
  
  return <>{CarrierUi()}</>;
}
