import React, { useEffect, useState } from 'react'
import { Route, useHistory, useLocation, useParams } from 'react-router-dom'

import { Layout, Spin } from 'antd'

import { useMedia } from 'Context/Media/MediaContext'
import NewPageHeader from './NewPageHeader'
import { IFilterType } from './Search/SearchIndex'
// import { useMedia } from 'Media/MediaContext'
// import { useNote } from 'Note/NoteContext'
import CustomBackTop from 'components/CustomBackTop'
import './layout.css'
import style from './styles/NewPage.module.scss'

const MaterialInfo = React.lazy(() => import('./Material/MaterialInfo'))
const ActivityVideo = React.lazy(() => import('./Activity/ActivityVideo'))
const ActivityTypeDetail = React.lazy(() => import('./Activity/ActivityTypeDetail'))
const ActivitySpecialInfo = React.lazy(() => import('./Activity/ActivitySpecialInfo'))

const PersonalIndex = React.lazy(() => import('./Personal/PersonalIndex'))
const NewestIndex = React.lazy(() => import('./Newest/NewestIndex'))
const ProductIntroduce = React.lazy(() => import('./Material/ProductIntroduction'))
const Quotation = React.lazy(() => import('./Material/Quotation'))
// const IndepthVideo = React.lazy(() => import('./Indepth/IndepthVideo'))
const SearchIndex = React.lazy(() => import('./Search/SearchIndex'))
const ThemeInfo = React.lazy(() => import('./Community/ThemeInfo'))
const AuthorInfo = React.lazy(() => import('./Community/AuthorInfo'))
const ResearchIndex = React.lazy(() => import('./Community/ResearchIndex'))
const ColumnIndex = React.lazy(() => import('./Column/ColumnIndex'))
const ColumnEditor = React.lazy(() => import('./Column/ColumnEditor'))
const ColumnDetail = React.lazy(() => import('./Column/ColumnDetail'))
const ColumnModify = React.lazy(() => import('./Column/ColumnModify'))
const ColumnCheck = React.lazy(() => import('./Column/ColumnCheck'))
const LicenseHtml = React.lazy(() => import('./Material/LicenseHtml'))
const PolicyHtml = React.lazy(() => import('./Material/PolicyHtml'))

// const ArticleNoAuthentication = React.lazy(() => import('./Article/ArticleNoAuthentication'))

// 转换路由中的ID参数为number类型，同时路由中的(\\d+)正则匹配限定参数为数字

const MaterialInfowidthRoute: React.FC = () => {
  const { articleID }: { articleID: string } = useParams()
  return <MaterialInfo articleID={Number(articleID)} />
}
const ActivityVideowidthRoute: React.FC = () => {
  const { videoID }: { videoID: string } = useParams()
  return <ActivityVideo videoID={Number(videoID || 0)} />
}
const ActivityDetailwidthRoute: React.FC = () => {
  const { activityID }: { activityID: string } = useParams()
  return <ActivityTypeDetail activityID={Number(activityID || 0)} />
}
const ActivitySpecialInfowidthRoute: React.FC = () => {
  const { activityID }: { activityID: string } = useParams()
  return <ActivitySpecialInfo activityID={Number(activityID || 0)} />
}
const SearchIndexwidthRoute: React.FC = () => {
  const { keword }: { keword: string } = useParams()
  return <SearchIndex keyword={keword} />
}
const ThemeInfowidthRoute: React.FC = () => {
  const { themeID }: { themeID: string } = useParams()
  return <ThemeInfo themeID={Number(themeID || 0)} />
}
const AuthorInfowidthRoute: React.FC = () => {
  const { authorID }: { authorID: string } = useParams()
  return <AuthorInfo authorID={Number(authorID || 0)} />
}
const ResearchIndexwidthRoute: React.FC = () => {
  const { researchId }: { researchId: string } = useParams()
  return <ResearchIndex researchId={researchId} />
}
const ColumnIndexwidthRoute: React.FC = () => {
  const { columnId }: { columnId: string } = useParams()
  return <ColumnIndex columnId={Number(columnId || 0)} />
}
const ColumnEditorwidthRoute: React.FC = () => {
  const { columnId, articleId }: { columnId: string; articleId: string } = useParams()
  return <ColumnEditor columnId={Number(columnId || 0)} articleId={Number(articleId || 0)} />
}
const ColumnDetailwidthRoute: React.FC = () => {
  const { articleId }: { articleId: string } = useParams()
  return <ColumnDetail articleId={Number(articleId || 0)} />
}
const ColumnModifywidthRoute: React.FC = () => {
  const { articleId }: { articleId: string } = useParams()
  return <ColumnModify articleId={Number(articleId || 0)} />
}
const ColumnCheckwidthRoute: React.FC = () => {
  const { articleId }: { articleId: string } = useParams()
  return <ColumnCheck articleId={Number(articleId || 0)} />
}

const NewPage: React.FC = () => {
  const routeConfig = [
    { key: 'newest', path: '/', component: NewestIndex },
    { key: 'my', path: '/my', component: PersonalIndex },
    { key: 'materialinfo', path: '/material/info/:articleID(\\d+)', component: MaterialInfowidthRoute },
    { key: 'productintroduce', path: '/material/product', component: ProductIntroduce },
    { key: 'quotation', path: '/material/quotation', component: Quotation },
    { key: 'search', path: '/search/:keword', component: SearchIndexwidthRoute },

    {
      key: 'activityVideo',
      path: '/activity/video/:videoID(\\d+)',
      component: ActivityVideowidthRoute
    },
    {
      key: 'activitySpecialDetail',
      path: '/activity/info/:activityID(\\d+)',
      component: ActivitySpecialInfowidthRoute
    },

    {
      key: 'activityTypeDetail',
      path: '/activity/detail/:activityID(\\d+)',
      component: ActivityDetailwidthRoute
    },
    // {
    //   key: 'indepthvideo',
    //   path: '/indepth/video/:permissionID(\\d+)/:industryID(\\d+)/:videoID',
    //   component: IndepthVideowidthRoute
    // },
    { key: 'theme', path: '/community/theme/:themeID', component: ThemeInfowidthRoute },
    { key: 'author', path: '/community/author/:authorID', component: AuthorInfowidthRoute },
    {
      key: 'research',
      path: '/research/:researchId',
      component: ResearchIndexwidthRoute
    },
    {
      key: 'columndetail',
      path: '/column/detail/:articleId',
      component: ColumnDetailwidthRoute
    },
    {
      key: 'columneditor',
      path: ['/column/editor/:columnId', '/column/editor/:columnId/:articleId'],
      component: ColumnEditorwidthRoute
    },
    {
      key: 'column',
      path: ['/column', '/column/view/:columnId'],
      component: ColumnIndexwidthRoute
    },
    {
      key: 'columnmodify',
      path: '/column/modify/:articleId',
      component: ColumnModifywidthRoute
    },
    {
      key: 'columncheck',
      path: '/column/check/:articleId',
      component: ColumnCheckwidthRoute
    },
    {
      key: 'license',
      path: '/material/license',
      component: LicenseHtml
    },
    {
      key: 'policy',
      path: '/material/policy',
      component: PolicyHtml
    }
  ]
  const history = useHistory()
  const media = useMedia()
  const [isShowMobileMenu, setIsShowMobileMenu] = useState<boolean>(false) // 识别报告详情页+活动详情页，适配移动菜单

  useEffect(() => {
    handleChangeMenuKey(history.location)
    history.listen(location => {
      window.scrollTo(0, 0)
      handleChangeMenuKey(location)
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const handleChangeMenuKey = (location: any) => {
    // 识别报告详情页+活动详情页，适配移动菜单
    if (media.isSmallMax) {
      const routhStr = ['/material/info', '/activity/info', '/activity/detail', '/internal/article', '/column/detail']
      let flag = false
      routhStr.forEach(item => {
        if (location.pathname.includes(item)) {
          setIsShowMobileMenu(true)
          flag = true
        }
      })
      if (!flag) {
        setIsShowMobileMenu(false)
      }
    } else {
      setIsShowMobileMenu(false)
    }
  }
  return (
    <Layout style={{ background: '#F2F2F2' }}>
      <NewPageHeader />
      <Layout.Content className={style['newindex-layout']} style={{ minWidth: isShowMobileMenu ? 'auto' : '1024px' }}>
        <div className={style['newindex-content']}>
          <React.Suspense
            fallback={
              <div className={style['new-suspense']}>
                <Spin />
              </div>
            }
          >
            {/* <ColResize initialLeftPercent={isNoteOpen ? 50 : 100}> */}
            <div>
              {routeConfig.map(item => (
                <Route key={item.key} exact path={item.path} component={item.component} />
              ))}
            </div>
            {/* {isNoteOpen && <Note />} */}
            {/* </ColResize> */}
          </React.Suspense>
        </div>
        <CustomBackTop />
      </Layout.Content>
      {/* <Layout.Footer className={style['clpt-footer']} /> */}
    </Layout>
  )
}

export default NewPage
