import { useProp, useState, useEffect, useEvent, h } from 'atomico';
import 'funfix';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import './kun-icon.js';
import './kun-button-puer.js';
import './kun-checkbox.js';
import { Maybe } from 'purify-ts/es/Maybe';
import produce from 'immer';

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

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-exercise-select/kun-exercise-select.tsx";





const KunExerciseSelect = () => {
  const [kunSeriesId] = useProp("kunSeriesId");
  const [kunPostId] = useProp("kunPostId");

  const [kunExerciseProp] = useProp("kunExercise");
  const [kunExercise, setKunExercise] = useState(Maybe.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 = produce(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(produce(kunExercise, (draft) => {
      draft.title = event.target.value;
    }));
  };

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

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

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

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

  const onAdd = () => {
    setOptions(produce(options, (draft) => {
      draft.push({
        checked: false,
        option: "",
      });
    }));
  };
  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 97}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 98}}, style)
      , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 99}}
        , h('div', { className: "mb-4", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 100}}
          , h('label', { className: "block text-gray-700 text-sm font-bold mb-2"    , htmlFor: "username", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 101}}, "问题"

          )
          , 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, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 104}}
          )
        )

        , h('div', { className: "mb-4", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 114}}
          , h('label', { className: "block text-gray-700 text-sm font-bold mb-2"    , htmlFor: "username", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 115}}, "解释"

          )
          , 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, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 118}}
          )
        )

        , h('div', { className: "mb-4", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 128}}
          , h('label', { className: "block text-gray-700 text-sm font-bold mb-2"    , htmlFor: "username", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 129}}, "选项"

          )
          , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 132}}
            , 
              options.map((option, index) => (
                h('div', { class: "flex flex-row w-full items-center mb-2"    , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 135}}
                  , h('span', { class: "mr-4", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 136}}
                    , h('kun-checkbox', { checked: option.checked, onMyChecked: (evt) => toggleCheck(evt, index), __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 137}} )
                  )
                  , h('div', { class: "flex-auto", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 139}}
                    , 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, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 140}}
                    )
                  )
                  , h('span', { class: "px-4", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 149}}
                    , h('kun-icon', { iconType: "close", onclick: () => removeOption(index), iconWidth: 18, iconHeight: 18, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 150}} )
                  )
                )
              ))
            
          )
          , h('kun-button-puer', { needleContent: "添加选项", onMyClick: onAdd, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 156}} )
        )

        , 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", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 159}}
        , "提交"

        )
      )
    )
  );
};

KunExerciseSelect.props = {
  kunSeriesId: {
    type: String,
  },
  kunPostId: {
    type: String,
  },
  kunExercise: {
    type: Object,
  },
};

var kunExerciseSelect = getComponentOrDefine("kun-exercise-select", KunExerciseSelect);

export default kunExerciseSelect;
