import {
  Component, h, useEvent, useProp,
} from "atomico";
import { ExerciseRecord } from "@caedman/seek-api/build/api/req-get-exercise-by-series";
import { Maybe } from "purify-ts/es/Maybe";
import "@caedman/gs/dist/global-style";
import "../kun-icon/kun-icon";
import "../kun-checkbox/kun-checkbox";
import style from "./kun-item-exercise.scss";
import "../kun-button-puer/kun-button-puer";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { ConstantExerciseType } from "@caedman/seek-api/build/api/req-create-exercise";

// type ConstantPostType = Value
// final val OPEN = Value(1, "OPEN")
// final val LINK = Value(2, "LINK") // title, link
// final val BOOK = Value(3, "BOOK") // book, link`
// final val CALC = Value(4, "CALC") // book, link`
// final val SELECT = Value(5, "SELECT") // book, link`
// final val ORDER = Value(6, "ORDER") // book, link`
// final val CHECK = Value(7, "CHECK") // book, link`

const getTitle = (type: string): string => {
  if (type === "SELECT") {
    return "选择题";
  }
  if (type === "OPEN") {
    return "问答题";
  }
  if (type === "CALC") {
    return "计算题";
  }
  if (type === "CHECK") {
    return "判断题";
  }
  return "练习题";
};

const defaultSeries: ExerciseRecord = {
  channelId: 50, seriesId: "AR", postId: "den", id: "8ca3c6a0-a13a-11ea-b2de-8583ea9a54e8", exerciseType: "OPEN", background: null, title: "dddd", tips: null, tags: [], correct: [], options: [], answer: "d", editor: "d13e2460-b025-11e9-b2ef-bff457d1b4dd", editorName: "liming", postTitle: null, seriesName: null, seriesType: null,
};

const KunItemExercise = () => {
  const [kunExercise] = useProp<ExerciseRecord>("kunExercise");
  const [kunNumber] = useProp<number>("kunNumber");

  const onEdit = useEvent("MyEdit", {
    composed: true,
    bubbles: true,
  });

  const onDelete = useEvent("MyDelete", {
    composed: true,
    bubbles: true,
  });

  const exercise: ExerciseRecord = Maybe.fromNullable(kunExercise).orDefault(defaultSeries);

  const deleteExercise = (exerciseItem: ExerciseRecord): void => {
    onDelete(exerciseItem);
  };

  const editExercise = (exerciseItem: ExerciseRecord): void => {
    onEdit(exerciseItem);
  };

  return (
    <host>
      <style>{style}</style>
      <div class="border border-r-2 border-solid p-4 bg-white">
        <div class="flex items-center mb-4">
          题目
          {kunNumber}
          <span class="ml-2">
            {getTitle(exercise.exerciseType)}
          </span>
        </div>
        <div class="flex flex-row">
          <span class="mr-2">
            问题:
          </span>
          {exercise.title}
        </div>
        {
          exercise.exerciseType === ConstantExerciseType.SELECT && (
          <div className="flex flex-row">
            <span className="mr-2">
              答案:
            </span>
            <div class="ml-8">
              {
                exercise.options.map((option, index) => (
                  <div class="flex flex-row mt-2 items-center">
                    <kun-checkbox checked={exercise.correct.indexOf(index) > -1} class="mr-2" disabled />
                    <div>{option}</div>
                  </div>
                ))
              }
            </div>
          </div>
          )
        }
        {
          exercise.exerciseType === ConstantExerciseType.OPEN && (
          <div className="flex flex-row">
            <span className="mr-2">
              答案:
            </span>
            {exercise.answer}
          </div>
          )
        }

        <div class="py-2 flex flex-row justify-end items-center">
          <kun-icon iconType="bianji" iconWidth={28} iconHeight={28} onclick={() => editExercise(exercise)} />
          <kun-icon iconType="shanchu" iconWidth={20} iconHeight={20} onclick={() => deleteExercise(exercise)} />
        </div>
      </div>
    </host>
  );
};

KunItemExercise.props = {
  kunExercise: {
    type: Object,
  },
  kunNumber: {
    type: Number,
    value: 1,
  },
};

export default getComponentOrDefine("kun-item-exercise", KunItemExercise);
