import React from "react";

import {
  ChecklistItem,
  ChecklistProps,
  iconColors,
} from "@shared/components/checklist/types";
import { List, ListItem } from "@shared/components/list";
import { MaterialIcon } from "@shared/components/material-icon";
import { Text } from "@shared/components/text";
import { cx } from "@shared/utils/cx";

function isChecklistItem(
  item: React.ReactNode | ChecklistItem
): item is ChecklistItem {
  return (
    item !== null &&
    typeof item === "object" &&
    !React.isValidElement(item) &&
    "title" in (item as Record<string, unknown>)
  );
}

export const Checklist: React.FC<ChecklistProps> = props => {
  const {
    items,
    listIconName = "check",
    listItemClassName,
    listContainerClassName,
    iconSize = 20,
    iconPosition = "center",
    iconColor = "green",
    iconClassName,
  } = props;
  const showIcons = listIconName !== "disc";
  if (!items?.length) return null;

 const renderContent = (content: React.ReactNode | string) => {
  if (
    typeof content === "string" &&
    content.includes("|") &&
    (content.match(/\|/g) || []).length % 2 === 0
  ) {
    const parts = content.split("|");
    const count = (content.match(/\|/g) || []).length;
    return parts.map((part, index) => {
      if (!part) return null;
      const isBold = count > 1 ? index % 2 === 1 : false;
      return isBold ? (
        <Text as="span" key={index} style={{ fontWeight: 900 }}>{part}</Text>
      ) : (
        <span key={index}>{part}</span>
      );
    });
  }
  return content;
};

  return (
    <List
      className={cx("mt-2 space-y-1", listContainerClassName)}
      variant={showIcons ? "unstyled" : "default"}
    >
      {items.map((item, idx) => {
        const structured = isChecklistItem(item);
        const hasCustomIcon = structured && !!item.iconUrl;
        const content = structured ? item.title : item;

        return (
          <ListItem
            variant={showIcons ? "unstyled" : "default"}
            key={idx}
            className={cx(
              `${showIcons ? "flex" : ""} ${iconPosition === "top" ? "items-start" : "items-center"} gap-2 text-text-secondary`,
              listItemClassName
            )}
          >
            {showIcons && hasCustomIcon ? (
              <div className="flex shrink-0 leading-none">
                <img
                  src={item.iconUrl}
                  alt={item.iconAlt || ""}
                  width={iconSize}
                  height={iconSize}
                  className={cx(
                    "block object-contain",
                    iconPosition === "top" ? "mt-1" : "",
                    iconClassName
                  )}
                />
              </div>
            ) : showIcons ? (
              <div className="flex leading-none">
                <MaterialIcon
                  name={listIconName}
                  size={iconSize}
                  color={iconColors[iconColor]}
                  weight="600"
                  className={cx(
                    "block",
                    iconPosition === "top" ? "mt-1" : "",
                    iconClassName
                  )}
                />
              </div>
            ) : null}
              <Text as="div">{renderContent(content)}</Text>
          </ListItem>
        );
      })}
    </List>
  );
};

Checklist.displayName = "Checklist";

export type { ChecklistItem, ChecklistProps };