import React, { useCallback, useState, useEffect } from "react";
import {
  library,
  generateRespones,
  RenderList,
  useRegister
} from "chatbot-antd";
import { IRouteComponentProps, history } from "umi";
import { Button, Modal } from "antd";
import { CustomerServiceOutlined } from "@ant-design/icons";
import Draggable from "react-draggable";
import Dooring from "@/assets/dooring.png";
import styles from "./index.less";

library.push(
  //语料库，push进去，也可以不用
  {
    text: "我是机器人",
    reg: "你是谁"
  },
  {
    text: (
      <div>
        <a href="https://github.com/MrXujiang">@徐小夕</a>
        <a href="https://github.com/yehuozhili/learnsinglespa">@yehuozhili</a>
      </div>
    ),
    useReg: /(.*?)作者是谁(.*?)/
  }
);

export default function Layout({ children }: IRouteComponentProps) {
  const [modalOpen, setModalOpen] = useState(false);
  const callb = useCallback((v: RenderList) => {
    setTimeout(() => {
      //使用settimeout 更像机器人回话
      let returnValue = generateRespones(v);
      if (returnValue) {
        //排除null
        setList(prev => [...prev, { isUser: false, text: returnValue }]);
      }
    }, 500);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleDeploy = () => {
    window.open("http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg");
  };
  // 注册
  const [render, setList] = useRegister(
    modalOpen,
    callb,
    {
      onOk: () => setModalOpen(false),
      onCancel: () => setModalOpen(false),
      title: "h5-Dooring机器人客服",
      width: 420
    },
    {},
    <div>
      welcome!欢迎使用h5-Dooring，你有任何问题，都可以咨询我哦～
      <div
        style={{
          paddingTop: "10px",
          marginTop: "10px",
          borderTop: "1px solid #f0f0f0"
        }}
      >
        <div>【dooring指南】</div>
        <div>
          <div>
            &nbsp;&nbsp;1.{" "}
            <a href="https://github.com/MrXujiang/h5-Dooring" target="_blank">
              H5-Dooring源码地址
            </a>
          </div>
          <div>
            &nbsp;&nbsp;2.{" "}
            <a
              href="https://github.com/MrXujiang/h5-Dooring/graphs/contributors"
              target="_blank"
            >
              贡献者列表
            </a>
          </div>
          <div>
            &nbsp;&nbsp;3. 如果复制/删除组件不生效, 请先点击需要复制/删除组件,
            再右键删除/复制
          </div>
          <div style={{ color: "red" }}>
            &nbsp;&nbsp;4. 如果二维码组件无法扫码, 请适当调小中间图标尺寸
          </div>
          <div style={{ fontSize: "12px" }}>
            &nbsp;&nbsp;5. dooring开源交流群(微信：Mr_xuxiaoxi)
          </div>
          <div style={{ fontSize: "12px", marginTop: "10px" }}>
            &nbsp;&nbsp;
            <Button type="primary" onClick={handleDeploy}>
              私有化部署
            </Button>
          </div>
        </div>
      </div>
    </div>
  );

  useEffect(() => {
    setInterval(() => {
      const timeout = +localStorage.getItem("tt");
      if (timeout && timeout < Date.now()) {
        localStorage.removeItem("tt");
        Modal.info({
          title: "Dooring温馨提示",
          content: <div>您的登录已过期, 请点击确认按钮重新登录</div>,
          okText: "确认",
          onOk() {
            localStorage.removeItem("rp");
            localStorage.removeItem("nickname");
            history.push("/login");
          }
        });
      }
    }, 1000 * 15);
  }, []);

  const showVideo = () => {
    Modal.info({
      title: "秒懂H5-Dooring",
      width: 860,
      zIndex: 100000,
      content: (
        <div style={{ height: 380 }}>
          <iframe
            style={{ width: "100%", height: "100%" }}
            src="//player.bilibili.com/player.html?isOutside=true&aid=113028657906637&bvid=BV1shsJeDEZh&cid=500001663189447&p=1"
            scrolling="no"
            border="0"
            frameborder="no"
            framespacing="0"
            allowfullscreen="true"
          >
            {" "}
          </iframe>
        </div>
      ),
      okText: "GET, 关闭",
      onOk() {}
    });
  };

  const hackCodeStyle =
    window.location.pathname.indexOf("preview") < 0
      ? { height: "100%" }
      : { height: "100%", overflow: "auto" };
  return (
    <div style={hackCodeStyle}>
      <div
        style={{
          position: "fixed",
          right: `${modalOpen ? "-100%" : "10px"}`,
          bottom: "16px",
          transition: "all 0.5s ease-in-out",
          zIndex: 2
        }}
      >
        <Button
          type="primary"
          style={{ padding: "0 6px" }}
          onClick={() => setModalOpen(!modalOpen)}
        >
          <CustomerServiceOutlined></CustomerServiceOutlined>
        </Button>
      </div>
      {render}
      {children}
      {window.location.pathname.indexOf("editor") > -1 && (
        <Draggable>
          <div className={styles.dragPay}>
            <div className={styles.crouseBtn}>搭建技巧(可拖动)</div>
            <div className={styles.mask} onClick={showVideo}>
              <img src={Dooring} alt="" />
            </div>
          </div>
        </Draggable>
      )}
    </div>
  );
}