/* eslint-disable no-nested-ternary */
/* eslint-disable jsx-a11y/alt-text */
import Image from "next/image";
import type { ReactNode } from "react";

import br_first_normal from "@/assets/svg/breadcrumb/br_first_normal.svg";
import br_first_selected from "@/assets/svg/breadcrumb/br_first_selected.svg";
import br_last_normal from "@/assets/svg/breadcrumb/br_last_normal.svg";
import br_last_selected from "@/assets/svg/breadcrumb/br_last_selected.svg";
import br_selected from "@/assets/svg/breadcrumb/br_selected.svg";
import { cn } from "@/libs/utils";

import LIcon from "../lucid-icon/lucid-icon";
import styles from "./breadcrumb.module.css";

function BreadcrumbBackground({
  steps,
  step,
  stepIndex,
  activeSteps,
}: {
  steps: { key: string }[];
  step: { key: string };
  stepIndex: number;
  activeSteps: string[];
}) {
  const commonProps = {
    width: 110,
    height: 32,
    alt: "breadcrumb_normal_svg",
    className: "h-[32px] w-[110px]",
  };

  let imageSrc;

  if (activeSteps.includes(step.key)) {
    if (stepIndex === 0) {
      imageSrc = br_first_selected;
    } else if (stepIndex === steps.length - 1) {
      imageSrc = br_last_selected;
    } else {
      imageSrc = br_selected;
    }
  } else {
    imageSrc = stepIndex === 0 ? br_first_normal : br_last_normal;
  }

  return <Image src={imageSrc} {...commonProps} />;
}

export const Breadcrumb = ({
  steps = [],
  activeSteps = [],
  completedSteps = [],
}: {
  steps: {
    key: string;
    label: ReactNode;
  }[];
  completedSteps?: string[];
  activeSteps: string[];
}) => {
  return (
    <div>
      <nav className={styles.navigation} aria-label="Breadcrumb">
        <ol className={styles["item-wrapper"]}>
          {steps.map((step, stepIndex) => (
            <li
              key={step.key}
              className={cn(
                "relative",
                stepIndex === 0
                  ? "z-20"
                  : stepIndex === steps.length - 1 &&
                      activeSteps.includes(step.key)
                    ? "z-20 -ml-4"
                    : activeSteps.includes(step.key)
                      ? "z-20 -ml-4"
                      : "z-10 -ml-4",
              )}
            >
              <div className="relative">
                <BreadcrumbBackground
                  steps={steps}
                  step={step}
                  stepIndex={stepIndex}
                  activeSteps={activeSteps}
                />
              </div>
              <span
                className={cn(
                  styles["item-label"],
                  activeSteps.includes(step.key)
                    ? "text-blue-500"
                    : "text-gray-400",
                )}
              >
                {completedSteps.includes(step.key) && (
                  <LIcon
                    name="Check"
                    className={styles["check-icon"]}
                    size={12}
                  />
                )}
                {step.label}
              </span>
            </li>
          ))}
        </ol>
      </nav>
    </div>
  );
};