import { $html, $for } from "sigpro";
import { val } from "../core/utils.js";
import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";

/** TIMELINE */
export const Timeline = (props) => {
  const { items = [], vertical = true, compact = false, ...rest } = props;

  const icons = {
    info: iconInfo,
    success: iconSuccess,
    warning: iconWarning,
    error: iconError,
  };

  return $html(
    "ul",
    {
      ...rest,
      class: () =>
        `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${
          val(compact) ? "timeline-compact" : ""
        } ${props.class || ""}`,
    },
    [
      $for(
        items,
        (item, i) => {
          const isFirst = i === 0;
          const isLast = i === val(items).length - 1;
          const itemType = item.type || "success";
          const renderSlot = (content) => (typeof content === "function" ? content() : content);

          return $html("li", { class: "flex-1" }, [
            !isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
            $html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
            $html("div", { class: "timeline-middle" }, [
              $html("img", {
                src: icons[itemType] || item.icon || icons.success,
                class: "w-4 h-4 object-contain mx-1",
                alt: itemType,
              }),
            ]),
            $html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
            !isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
          ]);
        },
        (item, i) => item.id || i,
      ),
    ],
  );
};