import { useRef, useProp, useEvent, h } from 'atomico';
import { Option } from 'funfix';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import { Maybe } from 'purify-ts/es/Maybe';

var style = ":host {\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-form/kun-form.tsx"; function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }















const KunForm = () => {
  const formRef = useRef();
  const [parseForm] = useProp("parseForm");
  const defaultFields = [{
    name: "abc",
    label: "标题",
    formType: "input",
  }];

  const submitEvent = useEvent("MySubmit", {
    composed: true,
    bubbles: true,
  });

  const onSubmitForm = (event) => {
    const formData = new FormData(formRef.current);

    let retResult = formData;
    if (parseForm) {
      retResult = JSON.parse(JSON.stringify(Array.from(formData.entries()).reduce((memo, pair) => ({
        ...memo,
        [pair[0]]: pair[1],
      }), {})));
    }
    submitEvent({
      form: retResult,
    });

    event.preventDefault();
    event.stopPropagation();
  };

  const [fields] = useProp("fields");
  const checkedFields = Maybe.fromPredicate(
    (r) => r.length > 0,
  )(fields).orDefault(defaultFields);
  const [submitText] = useProp("submitText");
  const checkedSubmitText = Option.of(submitText).getOrElse("提交");

  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 64}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 65}}, style)
      , h('form', { className: "pt-6", onsubmit: onSubmitForm, ref: formRef, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 66}}
        , 
          checkedFields.map((item) => (
            h('div', { className: "mb-4", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 69}}
              ,  item.formType !== "hidden" && (
              h('label', { className: "block text-gray-700 text-sm font-bold mb-2"    , htmlFor: item.name, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 71}}
                , item.label
              )
              )
              , 
                item.formType === "textarea" && (
                h('textarea', {
                  className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"          ,
                  name: item.name,
                  id: item.name,
                  value: item.value,
                  placeholder: item.placeholder, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 77}}
                )
                )
              
              , 
                item.formType === "hidden" && (
                h('input', {
                  className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"          ,
                  name: item.name,
                  id: item.name,
                  value: item.value,
                  type: "hidden",
                  placeholder: item.placeholder, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 88}}
                )
                )
              
              , 
                item.formType === "input" && (
                h('input', {
                  className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"          ,
                  name: item.name,
                  id: item.name,
                  value: item.value,
                  type: "text",
                  placeholder: item.placeholder, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 100}}
                )
                )
              
              , 
                item.formType === "select" && (
                h('select', {
                  name: item.name,
                  id: item.name,
                  className: "block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"              , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 112}}
                
                  , 
                    (_nullishCoalesce(item.options, () => ( []))).map((itm) => (h('option', { value: itm.value, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 118}}, itm.label)))
                  
                )
                )
              
            )
          ))
        
        , h('div', { className: "flex items-center justify-between"  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 126}}
          , h('button', {
            onclick: onSubmitForm,
            className: "bg-orange-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"       ,
            type: "submit", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 127}}
          
            , checkedSubmitText
          )
        )
      )
    )
  );
};

KunForm.props = {
  fields: {
    type: Array,
    value: [],
    reflect: true,
  },
  parseForm: {
    type: Boolean,
    value: true,
    reflect: true,
  },

  submitText: {
    type: String,
    value: "提交",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

var kunForm = getComponentOrDefine("kun-form", KunForm);

export default kunForm;
