import {
  h, c, useProp, Component, useEvent,
} from "atomico";
import "../kun-icon/kun-icon";
import "../kun-button-puer/kun-button-puer";
import "../kun-image-or-default/kun-image-or-default";
import { Option } from "funfix";
import { Series } from "@caedman/seek-api/build/api/get-card-by-id-and-version";
import style from "./kun-see-series-item.scss";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { getKunImageUrl } from "../kun-chat-message/kun-chat-message";

const KunSeeSeriesItem = () => {
  const [kunSeriesProp] = useProp<Series>("kunSeries");

  const MyClick = useEvent("MyClick", {
    bubbles: true,
    composed: true,
  });
  const series: Series = Option.of(kunSeriesProp).getOrElse({
    title: "有限次",
    subscriptionCount: 100,
    cardCount: 1000,
  } as Series);

  const onclickTo = (): void => {
    MyClick({});
  };

  return (
    <host>
      <style>{style}</style>
      <div class="border-solid rounded flex flex-row">
        <div class="flex-none">
          <kun-image-or-default url={getKunImageUrl(series.coverImageName)} width={56} height={56} />
        </div>
        <div class="w-full flex flex-row justify-between px-4">
          <div class="flex flex-col ">
            <div class="text-xl cursor-pointer text-xl" onclick={() => onclickTo()}>{series.title}</div>

            <div className="flex inline-flex mt-2">
              <span>
                卡片
                {series.cardCount}
              </span>
              <span>
                人数
                {series.subscriptionCount}
              </span>
            </div>
          </div>

          <div class="w-34">
            <kun-button-puer needleContent="查看" />
          </div>
        </div>
      </div>
    </host>
  );
};

KunSeeSeriesItem.props = {
  kunSeries: {
    type: Object,
  },
};

export default getComponentOrDefine("kun-see-series-item", KunSeeSeriesItem);
