import {
  Component, h, useEvent, useProp,
} from "atomico";
import style from "./kun-load-more.css";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunLoadMore = ({ }): Component => {
  const [loading] = useProp<boolean>("loading");
  const [hasMore] = useProp<boolean>("hasMore");
  const myClick = useEvent("MyClick", {
    composed: true,
    bubbles: true,
  });

  return (
    <host>
      <style>{style}</style>
      <div class="my-4">
        {loading && (
        <div className="flex flex-row items-center justify-center border cursor-pointer leading-8 rounded border-gray-400 mx-auto text-center h-12 items-center">
          ...
        </div>
        )}
        {
                    !loading && hasMore && (
                    <div
                      class="flex flex-row items-center justify-center border cursor-pointer leading-8 rounded border-gray-400 mx-auto text-center h-12 items-center"
                      onclick={() => myClick({})}
                    >
                      加载更多
                    </div>
                    )
                }
      </div>
    </host>
  );
};

KunLoadMore.props = {
  hasMore: {
    type: Boolean,
    value: true,
  },
  loading: {
    type: Boolean,
    value: false,
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-load-more", KunLoadMore);
