import {
  h, useEvent, useProp, useRef,
} from "atomico";
import { SeekCardItem } from "@caedman/seek-api/build/api/get-current-list";
import style from "./kun-learning-card.css";
import "../kun-icon/kun-icon";
import { useHoverHook } from "../../hooks/aync-hook/aync-hook";
import { getComponentOrDefine, redirect } from "../../hooks/aync-hook/redirect";
import { ConstantPostType } from "@caedman/seek-api/build/api/get-card-by-id-and-version";
import { ROUTES } from "../../common/routes";

export function KunLearningCard(props): Comment {
  const [hoverRef, isHovered] = useHoverHook();

  const [cardItem] = useProp<SeekCardItem>("kunCard");

  const ref = useRef(null);

  const updateEvent = useEvent("MyLearn", {
    composed: true,
    bubbles: true,
  });
  const handleClickRead = (): void => {
    updateEvent(1);
    // ref.current.dispatchEvent(new CustomEvent("handleOk", { detail: props }));
  };

  const handleClickEasy = (): void => {
    updateEvent(2);
    // ref.current.dispatchEvent(new CustomEvent("handleEasy", { detail: props }));
  };

  const handleClickHard = (): void => {
    updateEvent(2);
    // ref.current.dispatchEvent(new CustomEvent("handleHard", { detail: props }));
  };

  const handleGoToSeriesDetail = (id: string): void => {
    console.error(id);
    redirect(`${ROUTES.S}?s=${id}`);
  };

  const goToReadCard = (seriesId: string, postId: string): void => {
    redirect(`/web/plume/p?seriesId=${seriesId}&postId=${postId}`);
  };

  return (
    <host>
      <style>{style}</style>
      <div className="horse-card-item w-full container" ref={hoverRef}>
        <div className="horse-card-item-left" ref={ref}>
          <div className="horse-card-item-header ">
            {
              cardItem?.postType === ConstantPostType.TEXT_WITH_VIDEO && (
              <kun-icon iconType="video" iconWidth={30} iconHeight={30} />
              )
            }
            {
              (cardItem?.postType === ConstantPostType.TEXT || cardItem?.postType === ConstantPostType.ARTICLE) && (
              <kun-icon iconType="article" iconWidth={30} iconHeight={30} />
              )
            }
            {
              cardItem?.postType === ConstantPostType.FILE && (
              <kun-icon iconType="file" iconWidth={30} iconHeight={30} />
              )
            }

            {
              (cardItem?.postType === ConstantPostType.TEXT_WITH_AUDIO || cardItem?.postType === ConstantPostType.AUDIO) && (
              <kun-icon iconType="audio" iconWidth={30} iconHeight={30} />
              )
            }

            <a className="cardName" href={`/web/plume/p?seriesId=${cardItem.seriesId}&postId=${cardItem.cardId}`} target="_blank" rel="noopener noreferrer">
              {props.cardName}
            </a>

          </div>

          <div className="horse-card-item-series" onclick={() => handleGoToSeriesDetail(cardItem.seriesId)}>
            <div className="icon-series-left icon-series" />
            {
                props.seriesName != null && (
                <span className="series-desp">
                  专辑:
                  {" "}
                  {props.seriesName}
                </span>
                )
            }
          </div>
        </div>
        {
            isHovered && (
            <div className="learn-opts">
              <div className="learn-opt" onclick={handleClickRead}>
                <div className="icon icon-bg">
                  <div className="icon-ok" />
                </div>
                <span className="description">学习了</span>

              </div>

              <div className="learn-opt" onclick={handleClickEasy}>
                <div className="icon icon-bg-happy">
                  <div className="icon-happy" />
                </div>
                <span className="description">很简单</span>
              </div>

              <div className="learn-opt" onclick={handleClickHard}>
                <div className="icon icon-bg-sad">
                  <div className="icon-sad" />
                </div>
                <span className="description">较难</span>
              </div>
            </div>
            )
          }
      </div>
    </host>
  );
}

KunLearningCard.props = {
  seriesId: {
    type: Number,
    value: 1,
  },
  postType: {
    type: String,
    value: "kun-learning-card",
  },
  seriesName: {
    type: String,
    value: "kun-learning-card",
  },
  kunCard: {
    type: Object,
  },
  cardName: {
    type: String,
    value: "kun-learning-card",
  },
};

export default getComponentOrDefine("kun-learning-card", KunLearningCard);
