import React from "react";
import { BreadcrumbNavigationProps } from "./types";

import { Link } from "@shared/components/link";
import { MaterialIcon } from "@shared/components/material-icon";
import { Text } from "@shared/components/text";

export const BreadcrumbNavigation: React.FC<
  BreadcrumbNavigationProps
> = props => {
  const {
    links = [],
    textColor = "dark",
    mobileTextColor,
    desktopTextColor,
    maxWidth = true,
    float = "desktop",
  } = props;
  const resolvedMobile =
    mobileTextColor ?? (float === "desktop" ? "dark" : textColor);
  const resolvedDesktop =
    desktopTextColor ?? (float === "mobile" ? "dark" : textColor);
  const mobileColor = resolvedMobile === "dark" ? "text-text" : "text-white";
  const desktopColor =
    resolvedDesktop === "dark" ? "xl:text-text" : "xl:text-white";
  const color = `${mobileColor} ${desktopColor}`;

  const olPosition =
    float === "always"
      ? "absolute"
      : float === "mobile"
        ? "absolute xl:relative"
        : float === "desktop"
          ? "relative xl:absolute"
          : "relative";

  if (!links.length) return null;
  return (
    <nav
      aria-label="Breadcrumb"
      className={`${maxWidth ? `${float === "none" && "mx-5"} max-w-120 xl:mx-auto` : "mx-auto"} relative`}
    >
      <ol
        className={`${float === "always" && "px-7 md:px-14"} right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 pb-0 pt-8 ${olPosition} xl:mx-auto xl:flex-wrap xl:px-3`}
      >
        {links.map((link, index) => {
          const { image, ...linkProps } = link;
          const imageSrc = image?.url
            ? image.url.startsWith("//")
              ? `https:${image.url}`
              : image.url
            : "";
          const isLast = index === links.length - 1;
          return !isLast ? (
            <li key={index} className="flex flex-none items-center">
              {imageSrc && (
                <img
                  src={imageSrc}
                  alt={image?.alt || ""}
                  width={20}
                  height={20}
                  className="mr-2 h-10 w-10"
                />
              )}
              <Link
                href={linkProps.href}
                className={`label3 mr-2 whitespace-nowrap ${color} hover:underline`}
              >
                {linkProps.buttonLabel}
              </Link>

              <MaterialIcon name="chevron_right" className={`${color} `} />
            </li>
          ) : (
            <li key={index} className="flex min-w-0 items-center">
              {imageSrc && (
                <img
                  src={imageSrc}
                  alt={image?.alt || ""}
                  width={20}
                  height={20}
                  className="mr-2 h-10 w-10"
                />
              )}
              <Text as="span" className={`body3 mr-2 break-words ${color}`}>
                {link.buttonLabel}
              </Text>
            </li>
          );
        })}
      </ol>
    </nav>
  );
};

export default BreadcrumbNavigation;