import {
  h, useProp, Component, useEvent,
} from "atomico";
import { HorseCardItem1 } from "@caedman/seek-api/build/api/get-card-by-author-in-series";
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 style from "./kun-post-list-header.scss";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { getKunImageUrl } from "../kun-chat-message/kun-chat-message";

const KunPostListHeader = () => {
  const [cardProps] = useProp<HorseCardItem1>("post");
  const [seriesProps] = useProp<Series>("series");

  const defaultCard: HorseCardItem1 = {
    title: "做一个好人",
  } as HorseCardItem1;
  const defaultSeries: Series = {
    title: "做一个好人",
    coverImageName: "HKrq8LbEEeq11V94e6TtHg==.png",
  } as unknown as Series;

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

  const card = Option.of<HorseCardItem1>(cardProps).getOrElse(defaultCard);
  const series = Option.of(seriesProps).getOrElse(defaultSeries);
  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(series.coverImageName)} width={65} height={65} />
          <div className="ml-2 text-white text-xl cursor-pointer" onclick={() => clickEvent({})}>{card.title}</div>
        </div>
      </div>
    </host>
  );
};

KunPostListHeader.props = {
  series: {
    type: Object,
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
  post: {
    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-post-list-header", KunPostListHeader);
