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

export const Dropdown = (props, children) => {
  const { label, icon, items, ...rest } = props;

  const renderContent = () => {
    if (items) {
      const source = typeof items === "function" ? items : () => items;
      return $html("ul", { 
        tabindex: 0, 
        class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300" 
      }, [
        $for(source, (item) => 
          $html("li", {}, [
            $html("a", { 
              class: item.class || "",
              onclick: (e) => {
                if (item.onclick) item.onclick(e);
                if (document.activeElement) document.activeElement.blur();
              }
            }, [
              item.icon ? $html("span", {}, item.icon) : null,
              $html("span", {}, item.label)
            ])
          ])
        )
      ]);
    }

    return $html("div", { 
      tabindex: 0, 
      class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300" 
    }, [
      typeof children === "function" ? children() : children
    ]);
  };

  return $html("div", {
    ...rest,
    class: () => `dropdown ${val(props.class) || ""}`,
  }, [
    $html("div", {
      tabindex: 0,
      role: "button",
      class: "btn m-1 flex items-center gap-2",
    }, [
      icon ? (typeof icon === "function" ? icon() : icon) : null, 
      label ? (typeof label === "function" ? label() : label) : null
    ]),
    renderContent()
  ]);
};