import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useProp } from './chunks/c26036df.js';
import { u as useEvent } from './chunks/d4058887.js';
import { b as useState, u as useEffect } from './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import './chunks/23e44913.js';
import { M as Maybe_3 } from './chunks/d76d6172.js';
import './kun-icon.js';
import './kun-button-puer.js';
import './kun-checkbox.js';
import { r as rn } from './chunks/f484978b.js';

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

const KunExerciseSelect = () => {
  const [kunSeriesId] = useProp("kunSeriesId");
  const [kunPostId] = useProp("kunPostId");
  const [kunExerciseProp] = useProp("kunExercise");
  const [kunExercise, setKunExercise] = useState(Maybe_3.fromNullable(kunExerciseProp).orDefault({
    options: []
  }));
  const [options, setOptions] = useState([]);
  useEffect(() => {
    const corrects = kunExerciseProp.correct.map(correctItem => String(correctItem));
    const opts = kunExerciseProp.options.map((item, optionIndex) => ({
      option: item,
      checked: corrects.indexOf(String(optionIndex)) !== -1
    }));
    setOptions(opts);
  }, []);
  const onSubmit = useEvent("MySubmit", {
    bubbles: true,
    composed: true
  });

  const onSubmitForm = () => {
    const data = rn(kunExercise, draft => {
      draft.seriesId = kunSeriesId;
      draft.postId = kunPostId;
      draft.options = options.map(r => r.option);
      draft.correct = options.map((option, index) => ({
        index,
        checked: option.checked
      })).filter(it => it.checked).map(r => r.index.toString());
      draft.exerciseType = "SELECT";
    });
    onSubmit(data);
  };

  const changeTitle = event => {
    setKunExercise(rn(kunExercise, draft => {
      draft.title = event.target.value;
    }));
  };

  const toggleCheck = (evt, index) => {
    const {
      checked
    } = evt.detail;
    setOptions(rn(options, draft => {
      draft[index].checked = checked;
    }));
  };

  const changeDescription = event => {
    setKunExercise(rn(kunExercise, draft => {
      draft.tips = event.target.value;
    }));
  };

  const removeOption = index => {
    setOptions(rn(options, draft => {
      draft.splice(index, 1);
    }));
  };

  const changeOption = (event, index1) => {
    setOptions(rn(options, draft => {
      draft[index1].option = event.target.value;
    }));
  };

  const onAdd = () => {
    setOptions(rn(options, draft => {
      draft.push({
        checked: false,
        option: ""
      });
    }));
  };

  return h("host", null, h("style", null, style), h("div", null, h("div", {
    className: "mb-4"
  }, h("label", {
    className: "block text-gray-700 text-sm font-bold mb-2",
    htmlFor: "username"
  }, "\u95EE\u9898"), 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",
    id: "username",
    type: "text",
    placeholder: "",
    onchange: changeTitle,
    value: kunExercise.title
  })), h("div", {
    className: "mb-4"
  }, h("label", {
    className: "block text-gray-700 text-sm font-bold mb-2",
    htmlFor: "username"
  }, "\u89E3\u91CA"), 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",
    id: "username",
    type: "text",
    placeholder: "",
    onchange: changeDescription,
    value: kunExercise.tips
  })), h("div", {
    className: "mb-4"
  }, h("label", {
    className: "block text-gray-700 text-sm font-bold mb-2",
    htmlFor: "username"
  }, "\u9009\u9879"), h("div", null, options.map((option, index) => h("div", {
    class: "flex flex-row w-full items-center mb-2"
  }, h("span", {
    class: "mr-4"
  }, h("kun-checkbox", {
    checked: option.checked,
    onMyChecked: evt => toggleCheck(evt, index)
  })), h("div", {
    class: "flex-auto"
  }, h("input", {
    key: String(index),
    className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline",
    type: "text",
    placeholder: "",
    onchange: evt => changeOption(evt, index),
    value: option.option
  })), h("span", {
    class: "px-4"
  }, h("kun-icon", {
    iconType: "close",
    onclick: () => removeOption(index),
    iconWidth: 18,
    iconHeight: 18
  }))))), h("kun-button-puer", {
    needleContent: "\u6DFB\u52A0\u9009\u9879",
    onMyClick: onAdd
  })), h("button", {
    onclick: onSubmitForm,
    className: "bg-orange-400 hover:bg-orange-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline",
    type: "submit"
  }, "\u63D0\u4EA4")));
};

KunExerciseSelect.props = {
  kunSeriesId: {
    type: String
  },
  kunPostId: {
    type: String
  },
  kunExercise: {
    type: Object
  }
};
var kunExerciseSelect = getComponentOrDefine("kun-exercise-select", KunExerciseSelect);

export default kunExerciseSelect;
//# sourceMappingURL=kun-exercise-select.js.map
