import {
  h, c, useProp, Component,
} from "atomico";
import { ExerciseRecord } from "@caedman/seek-api/build/api/req-get-exercise-by-series";
import { Option } from "funfix";
import produce from "immer";
import { RequestCreateExercise, requestUpdatePractice } from "@caedman/seek-api/build/api/req-create-exercise";
import { reqCreatePractice, RequestCreatePractice } from "@caedman/seek-api/build/api/req-card-create-practice";
import style from "./kun-exersice-select.scss";
import "../kun-icon/kun-icon";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { execWithSixLoad } from "../../common/exec-confirm";

const KunExersiceSelect: Component = () => {
  const [itemProps, setItem] = useProp<ExerciseRecord>("item");
  const [indexEx, setIndex] = useProp<ExerciseRecord>("exerciseIndex");

  const item = Option.of(itemProps).getOrElse({
    title: "请选择这个故事",
    options: ["A", "B", "C"],
    practice: {
      answers: ["1", "2"],
    },
  } as unknown as ExerciseRecord);

  const selectdOptions: string[] = item.practice?.answers ?? [];

  const selectOption = async (index: string): Promise<void> => {
    let item1: ExerciseRecord;
    if (selectdOptions.indexOf(index) === -1) {
      item1 = produce(item, (draft) => {
        draft.practice = {
          practiceId: item.practice?.practiceId,
          answers: selectdOptions.concat(index),
        };
      });
    } else {
      const indexFound = selectdOptions.findIndex((indexNumber) => item === indexNumber);
      item1 = produce(item, (draft) => {
        draft.practice = {
          practiceId: item.practice?.practiceId,
          answers: selectdOptions.slice(indexFound, 1),
        };
      });
    }

    console.log("item", item1.practice?.practiceId);

    await execWithSixLoad(async () => {
      const data = {
        seriesId: item.seriesId,
        postId: item.postId,
        exerciseId: item.id,
        practiceId: item1.practice?.practiceId,
        answer: "",
        answers: item1.practice.answers.map((item2) => String(item2)),
      } as RequestCreatePractice;

      if (item.practice?.practiceId == null) {
        await reqCreatePractice(data);
      } else {
        await requestUpdatePractice(data as unknown as RequestCreateExercise);
      }
      setItem(item1);
    });
  };

  return (
    <host>
      <style>{style}</style>
      <div class="flex flex-col">
        <div class="text-black opacity-75 py-4">
          练习
          {indexEx}
          :
          {item.title}
        </div>
        <div>
          {
              item.options.map((itemOption, index) => (
                <div class="flex w-full flex-row">
                  <div onclick={() => selectOption(String(index))} class={`${selectdOptions.indexOf(String(index)) > -1 ? "bg-orange-400" : ""} justify-between bg-gray-400 w-full flex py-2 px-4 mb-2 cursor-pointer hover:bg-orange-400 hover:text-white`} key={String(index)}>
                    <span>
                      {itemOption}
                    </span>
                    {
                    selectdOptions.indexOf(String(index)) > -1 && (
                    <div class="flex-none">
                      <kun-icon iconType="selected" iconWidth={24} iconHeight={24} />
                    </div>
                    )
                  }
                  </div>
                </div>
              ))
          }
        </div>
      </div>
    </host>
  );
};

KunExersiceSelect.props = {
  exerciseIndex: {
    type: Number,
    reflect: true,
  },
  item: {
    type: Object,
    reflect: true,
  },
};

export default getComponentOrDefine("kun-exersice-select", KunExersiceSelect);
