import { component$, useSignal, useVisibleTask$, type QwikIntrinsicElements } from "@builder.io/qwik";
import { isRTLDocument, type ItemResizeObserver } from "../core";
import type { JSXNode, CustomItemComponent } from "./types";

interface ListItemProps {
  children: JSXNode;
  resizer: ItemResizeObserver;
  index: number;
  offset: number;
  hide: boolean;
  isHorizontal: boolean;
  isSSR: boolean;
  as?: keyof QwikIntrinsicElements | CustomItemComponent;
}

/**
 * @internal
 */
export const ListItem = component$<ListItemProps>((props: ListItemProps) => {
  const {
    children,
    resizer,
    index,
    offset,
    hide,
    isHorizontal,
    isSSR,
    as: Element = "div"
  } = props;

  const elementRef = useSignal<Element>();

  // Set up resize observer when element is available
  useVisibleTask$(({ cleanup }: { cleanup: (fn: () => void) => void }) => {
    if (!elementRef.value || isSSR) return;
    
    const unsubscribe = resizer(elementRef.value as HTMLElement, index);
    if (unsubscribe) {
      cleanup(unsubscribe);
    }
  });

  // Calculate styles
  const style: Record<string, string | number | undefined> = {
    position: "absolute",
    [isHorizontal ? "height" : "width"]: "100%",
    [isHorizontal ? "top" : "left"]: "0px",
    [isHorizontal ? (isRTLDocument() ? "right" : "left") : "top"]: offset + "px",
    visibility: hide ? "hidden" : "visible",
  };

  if (isHorizontal) {
    style["display"] = "flex";
  }

  // Handle different element types
  if (typeof Element === "string") {
    // For intrinsic elements, we need to handle them differently
    switch (Element) {
      case "div":
        return (
          <div ref={elementRef} style={style}>
            {children}
          </div>
        );
      case "span":
        return (
          <span ref={elementRef} style={style}>
            {children}
          </span>
        );
      case "li":
        return (
          <li ref={elementRef} style={style}>
            {children}
          </li>
        );
      default:
        return (
          <div ref={elementRef} style={style}>
            {children}
          </div>
        );
    }
  } else {
    // Custom component
    const Component = Element as CustomItemComponent;
    return (
      <Component ref={elementRef} style={style}>
        {children}
      </Component>
    );
  }
});