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

/** TABS */
export const Tabs = (props) => {
  const { items, ...rest } = props;
  const itemsSignal = typeof items === "function" ? items : () => items || [];

  return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
    $html(
      "div",
      {
        role: "tablist",
        class: joinClass("tabs tabs-box", props.class),
      },
      $for(
        itemsSignal,
        (it) =>
          $html(
            "a",
            {
              role: "tab",
              class: () => joinClass(
                "tab", 
                val(it.active) && "tab-active", 
                val(it.disabled) && "tab-disabled", 
                it.tip && "tooltip"
              ),
              "data-tip": it.tip,
              onclick: (e) => !val(it.disabled) && it.onclick?.(e),
            },
            it.label,
          ),
        (t) => t.label,
      ),
    ),
    () => {
      const active = itemsSignal().find((it) => val(it.active));
      if (!active) return null;
      const content = val(active.content);
      return $html("div", { class: "p-4" }, [
        typeof content === "function" ? content() : content
      ]);
    },
  ]);
};