import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { cn } from "@/libs/utils";

import styles from "./circle-progress-bar.module.css";

interface CircleProgressBarItemProps {
  label: string;
}
interface CircleProgressBarProps {
  className?: string;
  activeIndex?: number;
  canGoNextStep?: boolean;
  items: CircleProgressBarItemProps[];
  itemOnClick?(clickedElementIndex: number): void;
}

function CircleProgressBar(props: CircleProgressBarProps) {
  const itemLenght = props.items.length;
  const activeItemNumber = props.items.findIndex((item, key) => {
    if (key === props?.activeIndex) {
      return item;
    }
    return null;
  });

  return (
    <ul className={cn(props.className, styles.list)}>
      <span
        style={{
          width: `calc(${(activeItemNumber / (itemLenght - 1)) * 100}%)`,
        }}
        className={styles.line}
      />
      {props.items.map((item, key) => {
        return (
          // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
          <li
            key={item.label}
            className={cn(
              styles.item,
              key === activeItemNumber ? styles.itemActive : "",
              // eslint-disable-next-line no-nested-ternary
              props?.canGoNextStep && props?.itemOnClick
                ? "cursor-pointer"
                : props?.itemOnClick && key < activeItemNumber
                  ? "cursor-pointer"
                  : "",
            )}
            onClick={() =>
              // eslint-disable-next-line no-nested-ternary
              !props?.canGoNextStep
                ? key < activeItemNumber
                  ? props?.itemOnClick && props?.itemOnClick(key)
                  : false
                : props?.itemOnClick && props?.itemOnClick(key)
            }
          >
            <div className={styles.circle}>
              <LIcon className={styles.icon} name="Check" size="14" />
            </div>
            <p className={styles.label}>{item.label}</p>
          </li>
        );
      })}
    </ul>
  );
}

export default CircleProgressBar;