import "./DKem_M_z.js";
import "./DwLkIEu4.js";
import { p as push, l as legacy_pre_effect, w as set, m as deep_read_state, n as legacy_pre_effect_reset, y as event, aU as $window, h as first_child, c as child, r as reset, t as template_effect, d as set_text, k as get, a as append, z as sibling, b as pop, q as mutable_source, aV as mutate, A as tick, g as comment, u as untrack, aW as text, f as from_html } from "./B-Kw_l3V.js";
import { i as if_block } from "./DWHK2A9K.js";
import { e as each, i as index } from "./qTQza25_.js";
import { s as slot } from "./zXynQJya.js";
import { t as transition } from "./CDUneY82.js";
import { a as action } from "./CHLP_p7V.js";
import { a as set_class, c as clsx, s as set_attribute } from "./B9yCN616.js";
import { b as bind_prop } from "./CoY6LkZW.js";
import { b as bind_this } from "./BSYzg88z.js";
import { i as init } from "./CUpGYt-B.js";
import { p as prop } from "./COqmMDwI.js";
import { f as flyAndScale } from "./GVdwQ4e6.js";
var root = from_html(`<span> </span>`);
var root_1 = from_html(`<button type="button"><!></button>`);
var root_2 = from_html(`<div><!></div>`);
var root_3 = from_html(`<button type="button"><!></button> <!>`, 1);
function Select($$anchor, $$props) {
  push($$props, false);
  const selectedLabel = mutable_source();
  let value = prop($$props, "value", 12, "");
  let items = prop($$props, "items", 24, () => []);
  let placeholder = prop($$props, "placeholder", 8, "");
  let onChange = prop($$props, "onChange", 8, () => {
  });
  let triggerClass = prop($$props, "triggerClass", 8, "");
  let labelClass = prop($$props, "labelClass", 8, "");
  let contentClass = prop($$props, "contentClass", 8, "rounded-2xl min-w-[170px] p-1 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 dark:text-white shadow-lg");
  let itemClass = prop($$props, "itemClass", 8, "flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl");
  let align = prop($$props, "align", 8, "start");
  let onClose = prop($$props, "onClose", 8, () => {
  });
  let open = prop($$props, "open", 12, false);
  let triggerEl = mutable_source();
  let contentEl = mutable_source();
  function portal(node) {
    document.body.appendChild(node);
    return {
      destroy() {
        if (node.parentNode) {
          node.parentNode.removeChild(node);
        }
      }
    };
  }
  function positionContent() {
    if (!get(triggerEl) || !get(contentEl)) return;
    const rect = get(triggerEl).getBoundingClientRect();
    mutate(contentEl, get(contentEl).style.position = "fixed");
    mutate(contentEl, get(contentEl).style.zIndex = "9999");
    mutate(contentEl, get(contentEl).style.top = `${rect.bottom + 4}px`);
    mutate(contentEl, get(contentEl).style.minWidth = `${rect.width}px`);
    if (align() === "end") {
      mutate(contentEl, get(contentEl).style.right = `${window.innerWidth - rect.right}px`);
      mutate(contentEl, get(contentEl).style.left = "auto");
    } else {
      mutate(contentEl, get(contentEl).style.left = `${rect.left}px`);
      mutate(contentEl, get(contentEl).style.right = "auto");
    }
  }
  async function toggleOpen() {
    open(!open());
    if (open()) {
      await tick();
      positionContent();
    }
  }
  function handleWindowClick(event2) {
    var _a, _b;
    if (!open()) return;
    if ((_a = get(triggerEl)) == null ? void 0 : _a.contains(event2.target)) return;
    if ((_b = get(contentEl)) == null ? void 0 : _b.contains(event2.target)) return;
    open(false);
    onClose()();
  }
  function handleKeydown(event2) {
    if (event2.key === "Escape" && open()) {
      open(false);
      onClose()();
    }
  }
  function selectItem(item) {
    value(item.value);
    open(false);
    onChange()(value());
  }
  legacy_pre_effect(
    () => (deep_read_state(items()), deep_read_state(value()), deep_read_state(placeholder())),
    () => {
      var _a;
      set(selectedLabel, ((_a = items().find((i) => i.value === value())) == null ? void 0 : _a.label) ?? placeholder());
    }
  );
  legacy_pre_effect_reset();
  var $$exports = { selectItem };
  init();
  var fragment = root_3();
  event("click", $window, handleWindowClick);
  event("keydown", $window, handleKeydown);
  event("scroll", $window, positionContent, true);
  event("resize", $window, positionContent);
  var button = first_child(fragment);
  var node_1 = child(button);
  slot(
    node_1,
    $$props,
    "trigger",
    {
      get selectedLabel() {
        return get(selectedLabel);
      },
      get open() {
        return open();
      }
    },
    ($$anchor2) => {
      var span = root();
      var text2 = child(span, true);
      reset(span);
      template_effect(() => {
        set_class(span, 1, clsx(labelClass()));
        set_text(text2, get(selectedLabel));
      });
      append($$anchor2, span);
    }
  );
  reset(button);
  bind_this(button, ($$value) => set(triggerEl, $$value), () => get(triggerEl));
  var node_2 = sibling(button, 2);
  {
    var consequent = ($$anchor2) => {
      var div = root_2();
      var node_3 = child(div);
      slot(
        node_3,
        $$props,
        "default",
        {
          get open() {
            return open();
          },
          selectItem
        },
        ($$anchor3) => {
          var fragment_1 = comment();
          var node_4 = first_child(fragment_1);
          each(node_4, 1, items, index, ($$anchor4, item) => {
            var button_1 = root_1();
            var node_5 = child(button_1);
            slot(
              node_5,
              $$props,
              "item",
              {
                get item() {
                  return get(item);
                },
                get selected() {
                  return deep_read_state(value()), get(item), untrack(() => value() === get(item).value);
                }
              },
              ($$anchor5) => {
                var text_1 = text();
                template_effect(() => set_text(text_1, (get(item), untrack(() => get(item).label))));
                append($$anchor5, text_1);
              }
            );
            reset(button_1);
            template_effect(() => set_class(button_1, 1, clsx(itemClass())));
            event("click", button_1, () => selectItem(get(item)));
            append($$anchor4, button_1);
          });
          append($$anchor3, fragment_1);
        }
      );
      reset(div);
      action(div, ($$node) => portal == null ? void 0 : portal($$node));
      bind_this(div, ($$value) => set(contentEl, $$value), () => get(contentEl));
      template_effect(() => set_class(div, 1, clsx(contentClass())));
      transition(3, div, () => flyAndScale);
      append($$anchor2, div);
    };
    if_block(node_2, ($$render) => {
      if (open()) $$render(consequent);
    });
  }
  template_effect(() => {
    set_class(button, 1, clsx(triggerClass()));
    set_attribute(button, "aria-label", placeholder());
  });
  event("click", button, toggleOpen);
  append($$anchor, fragment);
  bind_prop($$props, "selectItem", selectItem);
  return pop($$exports);
}
export {
  Select as S
};