import { observer } from "mobx-react";
import RenderRouter from "./renderRouter";
import store from "../store";
import '../styles/app.scss'
import { useRouter } from "../hooks/useRouter";
import Slider from "../components/layout/Slider";
import Header from "../components/layout/Header";
import { useEffect, useRef, useState } from "react";
import { unLoginPath } from "./routes";
import { Divider, Modal } from "antd";
import { NotifyStatus_Type } from "../types";
import { http_notify } from "../http/api";

const LayoutRouter = () => {

  const { push, location } = useRouter()
  const [visible, setVisible] = useState(false)
  const { token, screenWidth } = store.state
  const [notifys, setNotifys] = useState([] as any)
  // 

  useEffect(() => {
    window.addEventListener("resize", (e) => {
      const _width = window.innerWidth;
      store.setScreenWidth(_width)
    })
    window.onload = () => {
      const _width = window.innerWidth;
      store.setScreenWidth(_width)
    }
  }, [])

  useEffect(() => {

    if (!token && !unLoginPath.includes(location.pathname) && location.pathname !== "/submit") {
      push('/login', null, true)
    }
    if (token && unLoginPath.includes(location.pathname) && location.pathname !== "/submit") {
      push('/', null, true)
    }
  }, [location.pathname, token])

  const isShowNotifyModal = async () => {

    try {
      const res: any = await http_notify()
      if (res.code === 0) {
        console.log(res);

        setNotifys(res.data)
        const type = window.localStorage.getItem('NotifyStatus') || NotifyStatus_Type.show
        if (type === NotifyStatus_Type.show && res.data && res.data.length > 0) {
          setVisible(true)
          window.localStorage.setItem('NotifyStatus', NotifyStatus_Type.hidden)
        }
      }
    } catch (error) {
    }


  }

  useEffect(() => {
    token && store.getUserInfo()
    token && store.getReceiveAccount()
    !token && store.resetUserInfo()
    !token && store.resetReceiveAccount()

    if (token) {
      isShowNotifyModal()
    }
  }, [token])

  return (
    <>
      {
        !token ? (
          <RenderRouter />
        ) : (
          <div className="layout">
            <div className="container-header"></div>
            <div className="container-aplication">
              {
                screenWidth > 1000 && <Slider />
              }
              <div style={{ paddingLeft: screenWidth > 1000 ? 40 : 0, flex: 1 }}>
                <Header />
                <div className="divider"></div>
                <RenderRouter />
              </div>
            </div>
          </div>
        )
      }
      <Modal
        open={visible}
        onCancel={() => setVisible(false)}
        footer={() => null}
        width={screenWidth > 1000 ? '60%' : '90%'}
        title="平台公告"
      >
        <div style={{ minHeight: 300 }}>
          {
            notifys.map((item: any) => (
              <div key={item.id} className="mt-2">
                <div className="fz-wb-550">{item.title}</div>
                <div dangerouslySetInnerHTML={{ __html: item.content }} className="mt-1"></div>
                <Divider />
              </div>
            ))
          }
        </div>
      </Modal>
    </>
  )
}

export default observer(LayoutRouter);