import { spread, insert, effect, className, style, addEventListener, createComponent, setAttribute, delegateEvents, template, mergeProps, memo } from 'solid-js/web';
import { OriginComponent, atomization, useEventController, emitEvent, extendsEvent, reflect, atom } from '@cn-ui/use';
import { For, createEffect, lazy, Suspense, mergeProps as mergeProps$1, Show } from 'solid-js';
import { Space, Icon, Trigger } from '@cn-ui/core';

const _tmpl$$a = /*#__PURE__*/template(`<label></label>`, 2),
      _tmpl$2$5 = /*#__PURE__*/template(`<div><span class="cn-check float-left mt-1 mr-2 h-4 w-4 appearance-none rounded-sm  border border-slate-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 focus:outline-none "></span><input class="hidden" type="checkbox"></div>`, 5);
const DefaultLabel = OriginComponent(props => {
  return (() => {
    const _el$ = _tmpl$$a.cloneNode(true);

    spread(_el$, props, false, true);

    insert(_el$, () => props.children);

    effect(_p$ => {
      const _v$ = props.class('cn-form-label inline-block text-slate-800'),
            _v$2 = props.style;

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined
    });

    return _el$;
  })();
});
const CheckBox = OriginComponent(props => {
  const value = atomization(props.value);
  const disabled = atomization(props.disabled);
  const indeterminate = atomization(props.indeterminate);
  const control = useEventController({
    disabled
  });
  return (() => {
    const _el$2 = _tmpl$2$5.cloneNode(true),
          _el$3 = _el$2.firstChild,
          _el$4 = _el$3.nextSibling;

    addEventListener(_el$2, "click", control([emitEvent(props.onValueInput, ([e]) => [e, !value()]), async e => {
      value(i => !i);
    }] // 使用 batch 会报错
    // { batch: false }
    ), true);

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$2) : props.ref = _el$2;

    spread(_el$2, () => extendsEvent(props), false, true);

    insert(_el$2, createComponent(DefaultLabel, {
      get ["for"]() {
        return props.id;
      },

      get children() {
        return props.children;
      }

    }), null);

    insert(_el$2, () => props.extra, null);

    effect(_p$ => {
      const _v$3 = props.class('cn-form-check flex-none cursor-pointer select-none', disabled() && 'pointer-events-none cursor-not-allowed opacity-70'),
            _v$4 = props.style,
            _v$5 = !!indeterminate(),
            _v$6 = value(),
            _v$7 = props.checkedChar ?? '√',
            _v$8 = props.id,
            _v$9 = disabled();

      _v$3 !== _p$._v$3 && className(_el$2, _p$._v$3 = _v$3);
      _p$._v$4 = style(_el$2, _v$4, _p$._v$4);
      _v$5 !== _p$._v$5 && _el$3.classList.toggle("indeterminate", _p$._v$5 = _v$5);
      _v$6 !== _p$._v$6 && setAttribute(_el$3, "checked", _p$._v$6 = _v$6);
      _v$7 !== _p$._v$7 && setAttribute(_el$3, "checked-char", _p$._v$7 = _v$7);
      _v$8 !== _p$._v$8 && setAttribute(_el$4, "id", _p$._v$8 = _v$8);
      _v$9 !== _p$._v$9 && (_el$4.disabled = _p$._v$9 = _v$9);
      return _p$;
    }, {
      _v$3: undefined,
      _v$4: undefined,
      _v$5: undefined,
      _v$6: undefined,
      _v$7: undefined,
      _v$8: undefined,
      _v$9: undefined
    });

    effect(() => _el$4.checked = value());

    return _el$2;
  })();
});

delegateEvents(["click"]);

const CheckGroup = OriginComponent(props => {
  const options = atomization(props.options);
  return createComponent(Space, mergeProps(props, {
    get children() {
      return createComponent(For, {
        get each() {
          return options();
        },

        children: it => {
          return createComponent(CheckBox, mergeProps(it, {
            onValueInput: async (e, state) => {
              if (typeof props.maxCheck === 'number' && state) {
                if (props.maxCheck === 1) {
                  // 单选特例
                  options().forEach(i => i.value(false));
                  return;
                }

                let count = 0;

                for (let i of options()) {
                  if (i.value()) {
                    count++;

                    if (count === props.maxCheck) {
                      props.onOverCheck && props.onOverCheck(e);
                      return false;
                    }
                  }
                }
              }
            }
          }));
        }
      });
    }

  }));
});

const useCheckGroup = data => {
  const dataAtom = atomization(data);
  const state = reflect(() => {
    let isPart = false;
    let allChecked = true;
    dataAtom().forEach(i => {
      let isChecked = i.value();

      if (isChecked) {
        isPart = true;
      } else {
        allChecked = false;
      }
    });
    return allChecked ? 'all' : isPart ? 'part' : 'none';
  });
  return {
    state,

    inverse() {
      dataAtom().forEach(i => i.value(i => !i));
    },

    setAll(value) {
      dataAtom().forEach(i => i.value(value));
    }

  };
};
/** 数据驱动的 生成组件 */

const CheckGroupController = OriginComponent(props => {
  // ! 必须传递 Atom 在内部进行动态绑定
  const {
    state,
    setAll
  } = useCheckGroup(props.data);
  return createComponent(CheckBox, mergeProps(props, {
    get value() {
      return reflect(() => state() !== 'none');
    },

    get indeterminate() {
      return reflect(() => state() === 'part');
    },

    onValueInput: async (e, value) => {
      switch (state()) {
        case 'none':
          setAll(true);
          break;

        case 'all':
        case 'part':
          setAll(false);
          break;
      }

      return false;
    },

    get children() {
      return props.children;
    }

  }));
});

const FormRadio = props => {
  // 重写默认值
  const inject = props.options.options.map(i => {
    return {
      children: i.label ?? i.value,
      origin: i,
      value: atom(i.value === props.options.default)
    };
  });
  createEffect(() => {
    const data = inject.map(i => i.value() === true && i.origin).filter(i => i)[0];
    data && props.value(data);
  });
  return createComponent(CheckGroup, mergeProps(() => props.options.params, {
    options: inject,
    maxCheck: 1
  }));
};

const _tmpl$$9 = /*#__PURE__*/template(`<div class="flex w-full rounded border-2 border-solid border-transparent bg-slate-100 px-4 py-1 transition-colors duration-300 hover:border-blue-400 "><input class="flex-1  bg-slate-100 text-slate-600 outline-none"></div>`, 3),
      _tmpl$2$4 = /*#__PURE__*/template(`<div class="flex items-center "></div>`, 2);
const Password = OriginComponent(props => {
  const disabled = atomization(props.disabled ?? false);
  const canShow = atom(false);
  const value = atomization(props.value ?? '');
  const ScoreComp = lazy(async () => {
    const comp = await import('./PasswordScore-e3e63f6c.js');
    return {
      default: comp.PasswordScore
    };
  });
  return createComponent(Space, mergeProps({
    vertical: true,

    get ["class"]() {
      return props.class(disabled() && 'cursor-not-allowed');
    }

  }, props, {
    get children() {
      return [memo(() => props.icon), (() => {
        const _el$ = _tmpl$$9.cloneNode(true),
              _el$2 = _el$.firstChild;

        _el$2.$$input = e => {
          value(e.target.value);
        };

        insert(_el$, (() => {
          const _c$ = memo(() => props.visibleIcon !== false, true);

          return () => _c$() && (() => {
            const _el$3 = _tmpl$2$4.cloneNode(true);

            _el$3.$$click = () => {
              if (disabled()) return;
              canShow(i => !i);
            };

            insert(_el$3, createComponent(Icon, {
              "class": "text-slate-400",

              get name() {
                return canShow() ? 'visibility_off' : 'visibility';
              }

            }));

            return _el$3;
          })();
        })(), null);

        effect(_p$ => {
          const _v$ = props.placeholder,
                _v$2 = disabled(),
                _v$3 = !!disabled(),
                _v$4 = canShow() ? 'text' : 'password';

          _v$ !== _p$._v$ && setAttribute(_el$2, "placeholder", _p$._v$ = _v$);
          _v$2 !== _p$._v$2 && (_el$2.disabled = _p$._v$2 = _v$2);
          _v$3 !== _p$._v$3 && _el$2.classList.toggle("cursor-not-allowed", _p$._v$3 = _v$3);
          _v$4 !== _p$._v$4 && setAttribute(_el$2, "type", _p$._v$4 = _v$4);
          return _p$;
        }, {
          _v$: undefined,
          _v$2: undefined,
          _v$3: undefined,
          _v$4: undefined
        });

        effect(() => _el$2.value = value());

        return _el$;
      })(), memo(() => memo(() => !!props.score, true)() && createComponent(Suspense, {
        get children() {
          return createComponent(ScoreComp, {
            value: value,

            get userInputs() {
              return props.userInputs;
            }

          });
        }

      }))];
    }

  }));
});

delegateEvents(["input", "click"]);

/**
 * @zh 只有 undefined 时才使用默认样式,null 为不渲染
 */
const defaultSlot = (defaultComp, slot) => {
  return slot === undefined ? defaultComp : slot;
};

const _tmpl$$8 = /*#__PURE__*/template(`<div><div class="sub flex items-center"></div><input class="flex-1 appearance-none bg-slate-100 outline-none " type="number" inputmode="decimal"><div class="add flex items-center"></div></div>`, 7);
const InputNumber = OriginComponent(props => {
  const disabled = atomization(props.disabled ?? false);
  const value = atomization(props.value ?? 0);
  let inputRef;
  const control = useEventController({
    disabled
  }); // * fixed 这里有精度问题！所以采用原生的加减以解决
  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp
  // const { add, sub } = useStep(value, props);

  return (() => {
    const _el$ = _tmpl$$8.cloneNode(true),
          _el$2 = _el$.firstChild,
          _el$3 = _el$2.nextSibling,
          _el$4 = _el$3.nextSibling;

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$) : props.ref = _el$;

    spread(_el$, () => extendsEvent(props), false, true);

    addEventListener(_el$2, "click", control(() => {
      inputRef.stepDown();
    }), true);

    insert(_el$2, (() => {
      const _c$ = memo(() => !!props.button, true);

      return () => _c$() && defaultSlot(createComponent(Icon, {
        name: "horizontal_rule",
        "class": "px-2 transition-colors hover:bg-slate-200"
      }), props.left);
    })());

    addEventListener(_el$3, "input", control(e => {
      let newValue = e.target.value;
      value(newValue);
    }), true);

    const _ref$2 = inputRef;
    typeof _ref$2 === "function" ? _ref$2(_el$3) : inputRef = _el$3;

    addEventListener(_el$4, "click", control(() => {
      inputRef.stepUp();
    }), true);

    insert(_el$4, (() => {
      const _c$2 = memo(() => !!props.button, true);

      return () => _c$2() && defaultSlot(createComponent(Icon, {
        name: "add",
        "class": "px-2 transition-colors hover:bg-slate-200"
      }), props.right);
    })());

    effect(_p$ => {
      const _v$ = props.class('flex w-full items-center  rounded border-2 border-solid border-transparent bg-slate-100 px-4 py-1 text-slate-500 transition-colors duration-300 hover:border-blue-400'),
            _v$2 = props.style,
            _v$3 = !!disabled(),
            _v$4 = disabled(),
            _v$5 = props.placeholder || '请输入',
            _v$6 = props.min,
            _v$7 = props.max,
            _v$8 = props.step;

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
      _v$3 !== _p$._v$3 && _el$.classList.toggle("cursor-not-allowed", _p$._v$3 = _v$3);
      _v$4 !== _p$._v$4 && (_el$3.disabled = _p$._v$4 = _v$4);
      _v$5 !== _p$._v$5 && setAttribute(_el$3, "placeholder", _p$._v$5 = _v$5);
      _v$6 !== _p$._v$6 && setAttribute(_el$3, "min", _p$._v$6 = _v$6);
      _v$7 !== _p$._v$7 && setAttribute(_el$3, "max", _p$._v$7 = _v$7);
      _v$8 !== _p$._v$8 && setAttribute(_el$3, "step", _p$._v$8 = _v$8);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined,
      _v$3: undefined,
      _v$4: undefined,
      _v$5: undefined,
      _v$6: undefined,
      _v$7: undefined,
      _v$8: undefined
    });

    effect(() => _el$3.value = value());

    return _el$;
  })();
});

delegateEvents(["click", "input"]);

const _tmpl$$7 = /*#__PURE__*/template(`<div><input class="flex-1  appearance-none  outline-none " type="range"></div>`, 3);
const Slider = OriginComponent(props => {
  // 不同于 InputNumber，这个是不一样的
  props = mergeProps$1({
    min: 0,
    max: 100,
    step: 1
  }, props);
  const disabled = atomization(props.disabled ?? false);
  const value = atomization(props.value ?? 0);
  const control = useEventController({
    disabled
  });
  return (() => {
    const _el$ = _tmpl$$7.cloneNode(true),
          _el$2 = _el$.firstChild;

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$) : props.ref = _el$;

    addEventListener(_el$2, "input", control(e => {
      let newValue = e.target.value;
      value(newValue);
    }), true);

    effect(_p$ => {
      const _v$ = props.class('cn-slider flex w-full items-center '),
            _v$2 = !!disabled(),
            _v$3 = props.style,
            _v$4 = disabled(),
            _v$5 = props.placeholder || '请输入',
            _v$6 = props.min,
            _v$7 = props.max,
            _v$8 = props.step;

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _v$2 !== _p$._v$2 && _el$.classList.toggle("cursor-not-allowed", _p$._v$2 = _v$2);
      _p$._v$3 = style(_el$, _v$3, _p$._v$3);
      _v$4 !== _p$._v$4 && (_el$2.disabled = _p$._v$4 = _v$4);
      _v$5 !== _p$._v$5 && setAttribute(_el$2, "placeholder", _p$._v$5 = _v$5);
      _v$6 !== _p$._v$6 && setAttribute(_el$2, "min", _p$._v$6 = _v$6);
      _v$7 !== _p$._v$7 && setAttribute(_el$2, "max", _p$._v$7 = _v$7);
      _v$8 !== _p$._v$8 && setAttribute(_el$2, "step", _p$._v$8 = _v$8);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined,
      _v$3: undefined,
      _v$4: undefined,
      _v$5: undefined,
      _v$6: undefined,
      _v$7: undefined,
      _v$8: undefined
    });

    effect(() => _el$2.value = value());

    return _el$;
  })();
});

delegateEvents(["input"]);

const _tmpl$$6 = /*#__PURE__*/template(`<div class="flex "><span class="px-2"></span></div>`, 4);
const FormNumber = props => {
  return createComponent(InputNumber, mergeProps(() => props.options.params, {
    get value() {
      return props.value;
    },

    style: {
      width: '50%'
    }
  }));
};
const FormSlider = props => {
  return (() => {
    const _el$ = _tmpl$$6.cloneNode(true),
          _el$2 = _el$.firstChild;

    _el$.style.setProperty("width", "50%");

    insert(_el$2, () => props.value());

    insert(_el$, createComponent(Slider, mergeProps(() => props.options.params, {
      get value() {
        return props.value;
      }

    })), null);

    return _el$;
  })();
};

const _tmpl$$5 = /*#__PURE__*/template(`<div class="overflow-y-auto overflow-x-hidden" style="max-height:50vh; max-width:20em"></div>`, 2),
      _tmpl$2$3 = /*#__PURE__*/template(`<div class="cursor-pointer px-2 transition-colors duration-300 hover:bg-slate-600 "></div>`, 2),
      _tmpl$3 = /*#__PURE__*/template(`<button></button>`, 2);
/** Select 组件的对象输入参数 */

const OptionsList = props => {
  // console.log('渲染', props.options());
  return (() => {
    const _el$ = _tmpl$$5.cloneNode(true);

    insert(_el$, createComponent(For, {
      get each() {
        return props.options();
      },

      children: item => {
        return (() => {
          const _el$2 = _tmpl$2$3.cloneNode(true);

          _el$2.$$click = () => props.onSelect(item);

          insert(_el$2, () => item.label ?? item.value);

          return _el$2;
        })();
      }
    }));

    return _el$;
  })();
};

const Select = OriginComponent(props => {
  const disabled = atomization(props.disabled ?? false); // 重新构建 options，使之全部成为 对象

  const inputOptions = atomization(props.options);
  const options = reflect(() => {
    return inputOptions().map(i => {
      return typeof i === 'string' ? {
        value: i
      } : i;
    });
  }); // 在 Options 中选中一个值，如果不是，那么将会使用第一个

  props.value(init => options().find(i => i.value === init.value) || options()[0]);
  const value = atomization(props.value);
  const control = useEventController({
    disabled
  });
  const loading = atom(false);
  const visible = atom(false);

  const popupContent = createComponent(OptionsList, {
    options: options,

    get onSelect() {
      return control([emitEvent(props.onClick), val => {
        value(val);
        visible(false);
      }], {
        loading
      });
    }

  });

  return createComponent(Trigger, {
    hideOnClick: false,
    interactive: true,
    onClickOutside: () => {
      visible(false);
    },
    placement: "bottom",
    content: popupContent,
    trigger: "click",
    visible: visible,
    disabled: disabled,

    get children() {
      const _el$3 = _tmpl$3.cloneNode(true);

      spread(_el$3, () => extendsEvent(props), false, true);

      insert(_el$3, () => value().label ?? value().value);

      effect(_p$ => {
        const _v$ = props.class(' h-6 overflow-hidden text-ellipsis whitespace-nowrap rounded bg-slate-200 px-2 text-slate-700 transition-all duration-300 ease-in-out'),
              _v$2 = !!(disabled() || loading()),
              _v$3 = { ...props.style,
          'min-width': '6em'
        };

        _v$ !== _p$._v$ && className(_el$3, _p$._v$ = _v$);
        _v$2 !== _p$._v$2 && _el$3.classList.toggle("opacity-70", _p$._v$2 = _v$2);
        _p$._v$3 = style(_el$3, _v$3, _p$._v$3);
        return _p$;
      }, {
        _v$: undefined,
        _v$2: undefined,
        _v$3: undefined
      });

      return _el$3;
    }

  });
});

delegateEvents(["click"]);

const _tmpl$$4 = /*#__PURE__*/template(`<div><input class="w-0 opacity-0" type="color"></div>`, 3);
const InputColor = OriginComponent(props => {
  const disabled = atomization(props.disabled ?? false);
  const value = atomization(props.value ?? '');
  const control = useEventController({
    disabled
  });
  let colorRef;
  return (() => {
    const _el$ = _tmpl$$4.cloneNode(true),
          _el$2 = _el$.firstChild;

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$) : props.ref = _el$;

    addEventListener(_el$, "click", control([emitEvent(props.onClick), () => {
      colorRef.showPicker();
    }]), true);

    spread(_el$, () => extendsEvent(props), false, true);

    addEventListener(_el$2, "input", control([emitEvent(props.onInput), e => {
      value(e.target.value);
    }]), true);

    const _ref$2 = colorRef;
    typeof _ref$2 === "function" ? _ref$2(_el$2) : colorRef = _el$2;

    effect(_p$ => {
      const _v$ = props.class('leading-0 inline-block h-6 w-6 rounded-full border-2 border-solid border-slate-400'),
            _v$2 = {
        'background-color': value(),
        ...props.style
      };

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined
    });

    effect(() => _el$2.value = value());

    return _el$;
  })();
});

delegateEvents(["click", "input"]);

const _tmpl$$3 = /*#__PURE__*/template(`<div></div>`, 2),
      _tmpl$2$2 = /*#__PURE__*/template(`<div class="pointer-events-none absolute right-0 top-0 h-full" style="width:50%">half</div>`, 2);
const Rate = OriginComponent(props => {
  const disabled = atomization(props.disabled ?? false);
  const value = atomization(props.value ?? 0);
  let keepVal = value();
  const control = useEventController({
    disabled
  });

  const getRate = e => {
    if (props.allowHalf && e.offsetX < 12) {
      return 0.5;
    } else {
      return 1;
    }
  };

  return (() => {
    const _el$ = _tmpl$$3.cloneNode(true);

    _el$.addEventListener("mouseleave", () => {
      value(keepVal);
    });

    _el$.addEventListener("mouseenter", () => {
      keepVal = value();
    });

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$) : props.ref = _el$;

    spread(_el$, () => extendsEvent(props), false, true);

    insert(_el$, () => [...Array(5).keys()].map(i => {
      return createComponent(Icon, {
        name: "star",
        "class": "relative cursor-pointer",

        get classList() {
          return {
            'text-yellow-400': value() > i
          };
        },

        onMouseMove: e => {
          value(getRate(e) + i);
        },

        get onClick() {
          return control([emitEvent(props.onValueInput), e => {
            value(getRate(e) + i);
            keepVal = value();
          }]);
        },

        get children() {
          const _el$2 = _tmpl$2$2.cloneNode(true);

          effect(() => _el$2.classList.toggle("backdrop-grayscale", !!(value() === i + 0.5)));

          return _el$2;
        }

      });
    }), null);

    insert(_el$, value, null);

    effect(_p$ => {
      const _v$ = props.class('w-fit text-2xl text-slate-200'),
            _v$2 = props.style;

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined
    });

    return _el$;
  })();
});

const FromSelect = props => {
  // 重写默认值
  props.value({
    value: props.options.default
  });
  return createComponent(Select, mergeProps(() => props.options.params, {
    get value() {
      return props.value;
    },

    get options() {
      return props.options.options;
    }

  }));
};
const FromColor = props => {
  return createComponent(InputColor, mergeProps(() => props.options.params, {
    get value() {
      return props.value;
    }

  }));
};
const FromRate = props => {
  return createComponent(Rate, mergeProps(() => props.options.params, {
    get value() {
      return props.value;
    }

  }));
};

const _tmpl$$2 = /*#__PURE__*/template(`<button><div class="ml-1 h-4  w-4 rounded-full bg-white transition-all duration-300 ease-in-out"></div></button>`, 4);
const Switch = OriginComponent(props => {
  const disabled = atomization(props.disabled ?? false);
  const value = atomization(props.value ?? false);
  const control = useEventController({
    disabled
  });
  const loading = atom(false);
  return (() => {
    const _el$ = _tmpl$$2.cloneNode(true),
          _el$2 = _el$.firstChild;

    addEventListener(_el$, "click", control([emitEvent(props.onClick), () => {
      value(i => !i);
    }], {
      loading
    }), true);

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$) : props.ref = _el$;

    spread(_el$, () => extendsEvent(props, ['onClick']), false, true);

    effect(_p$ => {
      const _v$ = props.class('h-6 w-12 rounded-2xl bg-slate-200 shadow-inner transition-all duration-300 ease-in-out'),
            _v$2 = !!value(),
            _v$3 = !!(disabled() || loading()),
            _v$4 = props.style,
            _v$5 = !!value();

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _v$2 !== _p$._v$2 && _el$.classList.toggle("bg-blue-500", _p$._v$2 = _v$2);
      _v$3 !== _p$._v$3 && _el$.classList.toggle("opacity-70", _p$._v$3 = _v$3);
      _p$._v$4 = style(_el$, _v$4, _p$._v$4);
      _v$5 !== _p$._v$5 && _el$2.classList.toggle("ml-7", _p$._v$5 = _v$5);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined,
      _v$3: undefined,
      _v$4: undefined,
      _v$5: undefined
    });

    return _el$;
  })();
});

delegateEvents(["click"]);

const FormSwitch = props => {
  return createComponent(Switch, mergeProps(() => props.options.params, {
    get value() {
      return props.value;
    }

  }));
};

const _tmpl$$1 = /*#__PURE__*/template(`<div><input class="flex-1 bg-slate-100 outline-none " type="text"></div>`, 3),
      _tmpl$2$1 = /*#__PURE__*/template(`<div class="text-xs italic "></div>`, 2);
const InputText = OriginComponent(props => {
  const disabled = atomization(props.disabled ?? false);
  const value = atomization(props.value ?? '');
  return (() => {
    const _el$ = _tmpl$$1.cloneNode(true),
          _el$2 = _el$.firstChild;

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$) : props.ref = _el$;

    spread(_el$, () => extendsEvent(props), false, true);

    insert(_el$, (() => {
      const _c$ = memo(() => props.icon !== undefined, true);

      return () => _c$() ? props.icon : createComponent(Icon, {
        name: "border_color",
        "class": "pr-4"
      });
    })(), _el$2);

    _el$2.$$input = e => {
      let newValue = e.target.value;

      if (typeof props.maxLength === 'number' && newValue.length > props.maxLength) {
        newValue = newValue.slice(0, props.maxLength);
        e.target.value = newValue;
      }

      value(newValue);
    };

    insert(_el$, (() => {
      const _c$2 = memo(() => !!props.allowClear, true);

      return () => _c$2() && createComponent(Icon, {
        name: "clear",
        onClick: () => {
          value('');
          console.log('触发点击事件');
        }
      });
    })(), null);

    insert(_el$, (() => {
      const _c$3 = memo(() => !!props.showWordLimit, true);

      return () => _c$3() && (() => {
        const _el$3 = _tmpl$2$1.cloneNode(true);

        insert(_el$3, (() => {
          const _c$4 = memo(() => typeof props.maxLength === 'number', true);

          return () => _c$4() ? value().length + '/' + props.maxLength : value().length;
        })());

        return _el$3;
      })();
    })(), null);

    insert(_el$, () => props.children, null);

    effect(_p$ => {
      const _v$ = props.class('flex w-full items-center rounded border-2 border-solid border-transparent bg-slate-100 px-4 py-1 text-slate-500 transition-colors duration-300 hover:border-blue-400'),
            _v$2 = props.style,
            _v$3 = disabled(),
            _v$4 = props.placeholder || '请输入',
            _v$5 = !!disabled();

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
      _v$3 !== _p$._v$3 && (_el$2.disabled = _p$._v$3 = _v$3);
      _v$4 !== _p$._v$4 && setAttribute(_el$2, "placeholder", _p$._v$4 = _v$4);
      _v$5 !== _p$._v$5 && _el$2.classList.toggle("cursor-not-allowed", _p$._v$5 = _v$5);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined,
      _v$3: undefined,
      _v$4: undefined,
      _v$5: undefined
    });

    effect(() => _el$2.value = value());

    return _el$;
  })();
});

delegateEvents(["input"]);

const FromText = props => {
  return createComponent(InputText, mergeProps(() => props.options.params, {
    get value() {
      return props.value;
    },

    style: {
      width: '50%'
    }
  }));
};

const registerFormComponent = new Map();
const defineFormTemplate = i => i;

const _tmpl$ = /*#__PURE__*/template(`<div class="w-full py-1 text-sm font-thin text-red-500"></div>`, 2),
      _tmpl$2 = /*#__PURE__*/template(`<div class=" flex flex-wrap border-b border-solid border-gray-200 px-4 py-2  font-thin text-gray-700"><label></label><span class="flex-1"></span></div>`, 6);

const useValidForm = (template, result) => {
  const valids = template.reduce((col, i) => {
    if (i.valid) {
      col[i.prop] = reflect(() => {
        const stringOrNull = i.valid.call(null, result()[i.prop](), result()); // string 代表错误信息，null 或者 undefined 代表通过

        return stringOrNull;
      });
    }

    return col;
  }, {});
  return {
    valids
  };
};

const Form = props => {
  const result = props.value;
  result(() => props.template.reduce((col, i) => {
    col[i.prop] = atom(i.default ?? undefined);
    return col;
  }, {}));
  const {
    valids
  } = useValidForm(props.template, result);
  return createComponent(For, {
    get each() {
      return props.template;
    },

    children: item => {
      const loader = registerFormComponent.get(item.type);

      if (loader) {
        const Comp = lazy(loader);
        return (() => {
          const _el$ = _tmpl$2.cloneNode(true),
                _el$2 = _el$.firstChild;
                _el$2.nextSibling;

          insert(_el$2, () => item.label ?? item.prop);

          insert(_el$, createComponent(Suspense, {
            get children() {
              return createComponent(Comp, {
                get value() {
                  return result()[item.prop];
                },

                options: item
              });
            }

          }), null);

          insert(_el$, createComponent(Show, {
            get when() {
              return memo(() => !!valids[item.prop], true)() && valids[item.prop]();
            },

            get children() {
              const _el$4 = _tmpl$.cloneNode(true);

              insert(_el$4, () => valids[item.prop]());

              return _el$4;
            }

          }), null);

          return _el$;
        })();
      } else {
        return;
      }
    }
  });
};

export { CheckBox, CheckGroup, CheckGroupController, DefaultLabel, Form, FormNumber, FormRadio, FormSlider, FormSwitch, FromColor, FromRate, FromSelect, FromText, InputColor, InputNumber, InputText, Password, Rate, Select, Slider, Switch, defineFormTemplate, registerFormComponent, useCheckGroup };
