import {
  Component, h, useEffect, useEvent, useProp,
} from "atomico";
import "../horse-download-box/horse-download-box";
import "../kun-upload-file/kun-upload-file";
import "../kun-icon/kun-icon";

import { useDocumentTitleHook } from "../../hooks/use-document-title-hook/use-document-title-hook";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { ROUTES } from "../../common/routes";

export const loginBoxstyle = `
.fixed-left-top {
  position: fixed;
  top: 10px;
  left: 15px;
}

.needle-item {
  margin-right: 10px;
}
.needle-items {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.wechat-img {
  width: 268px;
  height: 265px;
  padding: 26px
}

.login-box-flat {
  width: 400px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  background:rgba(255,255,255,1);
}

.login-box {
  width: 400px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  background:rgba(255,255,255,1);
  box-shadow:0px 3px 19px 0px rgba(223,223,223,0.5);
  border-radius:5px;
}

.page {
  width: 100%;
  height: 100vh;
  background:rgba(249,249,249,1);
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.login-title {
  font-size:40px;
  color:rgba(33,34,38,1);
  line-height:56px;
  margin-bottom: 50px;
}

`;

const LoginComponent: Component = () => {
  const d = useProp<string>("message");

  useEffect(() => {
    setTimeout(() => {
      const obj = new WxLogin({
        self_redirect: false,
        id: "login-box",
        appid: "wx4332e11f7d5c65e6",
        scope: "snsapi_login",
        redirect_uri: `https://www.xunlianying.vip/${ROUTES.RedirectWechat}`,
        href: "https://file.wintercoming.xyz/web/plume/index.css",
      });
    }, 100);
  }, []);

  useDocumentTitleHook("登录");
  const eventInit = {
    bubbles: true,
    composed: true,
  };
  const dispatchMyEvent = useEvent("LoginEvent", eventInit);
  const dispatchLoginWeibo = useEvent("LoginWeibo", eventInit);

  function handlerLogin(): void {
    dispatchMyEvent({
      // eslint-disable-next-line @typescript-eslint/camelcase
      user_name: "liming",
      password: "wozhiaini",
    });
  }
  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="page">
        <div className="fixed-left-top">
          <horse-download-box />
        </div>
        <span className="login-title">
          登录
          {d}
        </span>

        <div className="login-box">
          <span>
            请打开手机微信扫描二维码
            <span onclick={() => handlerLogin1()}>确认登录</span>
          </span>
          <div>
            <div id="login-box" className="wechat-img" />
          </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>
      </div>
    </host>
  );
};

LoginComponent.props = {
  message: {
    type: String,
    value: "login-component",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("login-component", LoginComponent);
