// components/Tabs.js
import { $, $html, $for } from "sigpro";
import { val, ui } from "../core/utils.js";

/**
 * Tabs component
 * 
 * daisyUI classes used:
 * - tabs, tabs-box, tabs-lifted, tabs-bordered
 * - tab, tab-active, tab-disabled
 * - flex, flex-col, gap-4, w-full, p-4
 */
export const Tabs = (props) => {
  const { class: className, items, activeIndex = $(0), ...rest } = props;
  
  const itemsSignal = typeof items === "function" ? items : () => items || [];

  // Si no se provee activeIndex, creamos uno interno
  const internalActive = $(0);
  const currentActive = activeIndex !== undefined ? activeIndex : internalActive;

  const handleTabClick = (idx, onClick) => (e) => {
    if (typeof currentActive === "function") {
      currentActive(idx);
    }
    onClick?.(e);
  };

  return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
    $html(
      "div",
      {
        role: "tablist",
        class: ui('tabs tabs-box', className),
      },
      $for(
        itemsSignal,
        (it, idx) => {
          const isActive = val(it.active) ?? (currentActive() === idx);
          
          return $html(
            "a",
            {
              role: "tab",
              class: () => ui('tab', isActive ? 'tab-active' : '', val(it.disabled) ? 'tab-disabled' : ''),
              onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined,
            },
            it.label,
          );
        },
        (t, idx) => t.label + idx,
      ),
    ),
    () => {
      const activeItem = itemsSignal().find((it, idx) => 
        val(it.active) ?? (currentActive() === idx)
      );
      if (!activeItem) return null;
      const content = val(activeItem.content);
      return $html("div", { class: "p-4" }, [
        typeof content === "function" ? content() : content
      ]);
    },
  ]);
};