import {
  Component, h, useEvent, useProp,
} from "atomico";
import "../kun-icon/kun-icon";
import style from "./kun-button-puer.scss";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

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

  const onClick = (): void => {
    if (!loading) {
      myClick({});
    }
  };

  return (
    <host>
      <style>{style}</style>
      <button
        type="button"
        onclick={onClick}
        className={`hover:text-orange-500 inline-flex text-sm items-center needle-button ${type === "normal" ? "button-normal" : ""} `}
      >
        {
            loading && (
            <kun-icon iconType="loading" iconWidth={18} iconHeight={18} />
            )
        }
        {needleContent}
      </button>
    </host>
  );
};

KunButtonPuer.props = {
  type: {
    type: String,
  },
  loading: {
    type: Boolean,
    value: false,
    reflect: true,
  },
  needleContent: {
    type: String,
    value: "确定",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-button-puer", KunButtonPuer as Component);
