import { h, c, useEvent } from "atomico";
import style from "./kun-login-box.scss";
import "@caedman/gs/dist/global-style";
import { loginBoxstyle } from "../login-component/login-component";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunLoginBox = () => {
  const eventInit = {
    bubbles: true,
    composed: true,
  };
  const dispatchMyEvent = useEvent("LoginEvent", eventInit);
  const dispatchLoginWeibo = useEvent("LoginWeibo", eventInit);

  const handlerLogin1 = (): void => {
    dispatchMyEvent({
      // eslint-disable-next-line @typescript-eslint/camelcase
      user_name: "guofucheng",
      password: "wozhiaini",
    });
  };

  const handlerLoginWeibo = (): void => {
    dispatchLoginWeibo({
      // eslint-disable-next-line @typescript-eslint/camelcase
      user_name: "guofucheng",
      password: "wozhiaini",
    });
  };

  return (
    <host>
      <style>{loginBoxstyle}</style>
      <div className="login-box-flat">
        <span>请打开手机微信扫描二维码确认登录</span>

        <div>
          <img className="wechat-img" src="https://file.wintercoming.xyz/wechat-upload.png" alt="wechat-upload" />
        </div>

        <div className="needle-items">
          <div role="presentation">
            <span className="needle-item" onclick={handlerLoginWeibo}>
              <kun-icon iconType="weibo" width={16} height={16} />
            </span>
          </div>
        </div>
      </div>
    </host>
  );
};

KunLoginBox.props = {
  message: {
    type: String,
    value: "kun-login-box",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-login-box", KunLoginBox);
