/* eslint-disable @typescript-eslint/no-non-null-assertion */
import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"
import cls from "classnames"

import { Icon } from ".."
import t from "@/constants/wording"
import Header from "../header"
import Footer from "../footer"

import * as styles from "./index.module.scss"
import "./layout.css"
import "../../styles/bulma.scss"
import "@/assets/font-icons/iconfont.css"
import "@/styles/index.scss"
import useTrack from "@/track"
import classNames from "classnames";

interface IProp extends Pick<React.HTMLProps<HTMLDivElement>, 'children' | 'className'> {
  hiddenUseFreeButton?: boolean
  hiddenGitHubIcon?: boolean
  headerExtend?: React.ReactNode
  headerRender?: React.ReactNode
}
let timer: NodeJS.Timeout
const { useState, useEffect, useRef } = React
const Index: React.FC<IProp> = ({
  children,
  className,
  hiddenUseFreeButton,
  hiddenGitHubIcon,
  headerExtend,
  headerRender,
}) => {
  const data = useStaticQuery<SiteTitleQueryQuery>(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
  const [scrollable, setScrollable] = useState(false)
  const scrollBtn = useRef<HTMLDivElement>(null)

  useTrack()

  useEffect(() => {
    let isTop = true
    if (typeof window !== "undefined") {
      window!.onscroll = function () {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop
        let clientHeight = document.documentElement.clientHeight
        if (osTop >= clientHeight) {
          setScrollable(true)
        } else {
          setScrollable(false)
        }
        if (!isTop) {
          clearInterval(timer)
        }
        isTop = false
      }
      scrollBtn.current!.onclick = function () {
        timer = setInterval(function () {
          let osTop =
            document.documentElement.scrollTop || document.body.scrollTop

          let speed = Math.ceil(osTop / 6)
          document.documentElement.scrollTop = document.body.scrollTop =
            osTop - speed
          isTop = true

          if (osTop === 0) {
            clearInterval(timer)
          }
        }, 30)
      }
    }
  }, [])
  return (
    <>
      {/* <!-- Google Tag Manager --> */}
      <script
        dangerouslySetInnerHTML={{
          __html: ` (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-KGDJBJW');`,
        }}
      />
      {/* <!-- End Google Tag Manager --> */}

      {/* <!-- Google Tag Manager (noscript) --> */}
      <noscript
        dangerouslySetInnerHTML={{
          __html: `<iframe
          src="https://www.googletagmanager.com/ns.html?id=GTM-KGDJBJW"
          height="0"
          width="0"
          style="display:none;visibility:hidden"
        />`,
        }}
      />
      {/* <!-- End Google Tag Manager (noscript) --> */}

      {/*TODO: below is old baidu tongji script, need to remove in later time*/}
      <script
        dangerouslySetInnerHTML={{
          __html: `
            var _hmt = _hmt || [];
            (function() {
              var hm = document.createElement("script");
              hm.src = "https://hm.baidu.com/hm.js?51f740f561d61c4b58220327215136bf";
              var s = document.getElementsByTagName("script")[0];
              s.parentNode.insertBefore(hm, s);
            })();
          `,
        }}
      />
      <script
        dangerouslySetInnerHTML={{
          __html: `
            var _hmt = _hmt || [];
            (function() {
              var hm = document.createElement("script");
              hm.src = "https://hm.baidu.com/hm.js?495aa576958489d83f7053886babd22e";
              var s = document.getElementsByTagName("script")[0];
              s.parentNode.insertBefore(hm, s);
            })();
          `,
        }}
      />
      <script src='https://app.beschannels.com/js-sdk/collect-0.0.1.min.js'></script>
      <script
        dangerouslySetInnerHTML={{
          __html: `
            var PhoneNumber = sessionStorage.getItem('PhoneNumber');
            window.myCollect = new window.Collect({
              org_id: 'orgb86f3cafcd4b287e38439a5e903a243b',//【必填】第三方客户的org_id，登录致趣后台>系统右上角>点击头像>个人设置>组织ID。
              event_props: {
                source: '官网',//来源信息
              },//【非必填】
              userFlag:{
                PhoneNumber: PhoneNumber,//手机号
                Email: "",//sessionStorage.getItem('Email'),//邮箱
              }//【非必填】，预置用户标识,需用户手动设置。
            });
            //自动埋点开启
            window.myCollect.init({
              page_view_auto: true,//页面浏览自动上报开关，默认开启true
              element_click_auto: false,//点击事件自动上报开关，默认关闭false。
              events: ['BUTTON', 'input[type="submit"]', 'IMG','A'],//设置可收集点击的元素,默认只支持这四个
            })
          `,
        }}
      />

      {headerRender ?? <Header hiddenUseFreeButton={hiddenUseFreeButton} hiddenGitHubIcon={hiddenGitHubIcon} headerExtend={headerExtend} />}
      <div className={classNames(styles.layout, className)}>
        <main>{children}</main>
        <div
          className={cls(styles.scrollBtnWrapper, styles.scrollDisplay)}
          style={{ display: scrollable ? "flex" : "none" }}
          role="button"
          aria-label={t("go back to top")}
          title={t("go back to top")}
          ref={scrollBtn}
        >
          <Icon name="chevron-right" />
        </div>
        <Footer />
      </div>
    </>
  )
}

export default Index