'use strict';

var web = require('solid-js/web');
var solidJs = require('solid-js');

// src/index.tsx
var _tmpl$ = /* @__PURE__ */ web.template(`<label><input type=checkbox> <span></span> `);
var _tmpl$2 = /* @__PURE__ */ web.template(`<label><span></span> <input type=number> `);
var _tmpl$3 = /* @__PURE__ */ web.template(`<label><span></span> <input type=text> `);
var _tmpl$4 = /* @__PURE__ */ web.template(`<label><span></span> <select></select> `);
var _tmpl$5 = /* @__PURE__ */ web.template(`<option>"options missing"`);
var _tmpl$6 = /* @__PURE__ */ web.template(`<option>`);
exports.BoolProp = (props) => (() => {
  const _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
  _el$2.addEventListener("change", (ev) => props.setValue(ev.currentTarget.checked));
  web.insert(_el$4, () => props.name);
  web.effect(() => web.setAttribute(_el$2, "name", props.name));
  web.effect(() => _el$2.checked = props.value());
  return _el$;
})();
exports.NumberProp = (props) => (() => {
  const _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
  web.insert(_el$6, () => props.name);
  _el$8.addEventListener("change", (ev) => props.setValue(ev.currentTarget.valueAsNumber));
  web.effect((_p$) => {
    const _v$ = props.name, _v$2 = props.min, _v$3 = props.max;
    _v$ !== _p$._v$ && web.setAttribute(_el$8, "name", _p$._v$ = _v$);
    _v$2 !== _p$._v$2 && web.setAttribute(_el$8, "min", _p$._v$2 = _v$2);
    _v$3 !== _p$._v$3 && web.setAttribute(_el$8, "max", _p$._v$3 = _v$3);
    return _p$;
  }, {
    _v$: void 0,
    _v$2: void 0,
    _v$3: void 0
  });
  web.effect(() => _el$8.value = props.value());
  return _el$5;
})();
exports.StringProp = (props) => (() => {
  const _el$9 = _tmpl$3(), _el$10 = _el$9.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling;
  web.insert(_el$10, () => props.name);
  _el$12.addEventListener("change", (ev) => props.setValue(ev.currentTarget.value));
  _el$12.$$input = (ev) => props.setValue(ev.currentTarget.value);
  web.effect(() => web.setAttribute(_el$12, "name", props.name));
  web.effect(() => _el$12.value = props.value());
  return _el$9;
})();
var filterEnum = (options) => {
  const entries = Object.entries(options);
  if (Object.keys(options).every((key) => key === options[options[key]].toString())) {
    return entries.reduce((items, [key, value]) => {
      if (!items.includes(key)) {
        items.push(value);
      }
      return items;
    }, []).map((item) => [item, options[item]]);
  }
  return entries;
};
exports.SelectProp = (props) => {
  const options = solidJs.createMemo(() => Array.isArray(props.options) ? props.options.map((option) => [option, option]) : filterEnum(props.options));
  const initialValue = options().findIndex(([, value]) => value === props.value());
  return (() => {
    const _el$13 = _tmpl$4(), _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$15.nextSibling;
    web.insert(_el$14, () => props.name);
    _el$16.addEventListener("change", (ev) => props.setValue(options()[ev.currentTarget.selectedIndex][1]));
    web.insert(_el$16, web.createComponent(solidJs.For, {
      get each() {
        return options();
      },
      get fallback() {
        return _tmpl$5();
      },
      children: ([key], index) => (() => {
        const _el$18 = _tmpl$6();
        web.insert(_el$18, key);
        web.effect(() => _el$18.value = index());
        return _el$18;
      })()
    }));
    web.effect(() => web.setAttribute(_el$16, "name", props.name));
    web.effect(() => _el$16.value = initialValue.toString());
    return _el$13;
  })();
};
var defaultInitialValues = {
  boolean: false,
  number: 0,
  string: "",
  object: void 0
};
function createControlledProp(name, options) {
  const initialValue = options == null ? void 0 : typeof options !== "object" ? options : options.initialValue ?? defaultInitialValues[options.type ?? "object"];
  if (initialValue == null) {
    throw new Error(`cannot get type for Prop ${name}`);
  }
  const propType = options.options ? "object" : options.type ?? typeof initialValue;
  const [value, setValue] = solidJs.createSignal(initialValue, {
    name
  });
  return [value, setValue, propType === "boolean" ? () => exports.BoolProp({
    name,
    value,
    setValue
  }) : propType === "number" ? () => exports.NumberProp({
    name,
    value,
    setValue
  }) : propType === "string" ? () => exports.StringProp({
    name,
    value,
    setValue
  }) : () => exports.SelectProp({
    name,
    value,
    setValue,
    options: options.options ?? [initialValue]
  })];
}
exports.createControlledProps = (props) => Object.entries(props).reduce((result, [name, options]) => {
  const [value, setValue, field] = createControlledProp(name, options);
  result[0][name] = value;
  result[0][`set${name.slice(0, 1).toUpperCase()}${name.slice(1)}`] = setValue;
  result[1].push(field({}));
  return result;
}, [{}, []]);
web.delegateEvents(["input"]);

exports.createControlledProp = createControlledProp;