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

const style = `
  :host {
    
  }
`;
const KunSeriesListItem = () => {
  const [cardProps] = useProp<Series>("kunItem");

  const defaultCard: Series = {
    title: "做一个好人",
  } as Series;

  const clickEvent = useEvent("MyClick", {
    composed: true,
    bubbles: true,
  });

  const card = Option.of<Series>(cardProps).getOrElse(defaultCard);
  return (
    <host>
      <style>{style}</style>
      <div class="py-4 bg-gray-400 w-full px-8">
        <div class="flex flex-row">
          <kun-image-or-default url={getKunImageUrl(card.coverImageName)} width={65} height={65} />
          <div className="ml-2 text-white text-xl cursor-pointer" onclick={() => clickEvent({})}>
            <div>
              {card.title}
            </div>
            <div class="text-sm text-gray-700">
              {card.subscriptionCount}
              人参与
            </div>
          </div>
        </div>
      </div>
    </host>
  );
};

KunSeriesListItem.props = {
  kunItem: {
    type: Object,
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
  message: {
    type: String,
    value: "kun-post-list-heade-dr",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-series-list-item", KunSeriesListItem);
