text: /* global window */
  /* global document */
  import { PureComponent, Fragment } from 'react'
  // import { PureComponent } from 'react'
  import PropTypes from 'prop-types'
  import withRouter from 'umi/withRouter'
  import { connect } from 'dva'
  import { MyLayout } from 'components'
  import { BackTop, Layout, Drawer } from 'antd'
  import { enquireScreen, unenquireScreen } from 'enquire-js'
  import { config, pathMatchRegexp, langFromPath } from 'utils'
  import Error from '../pages/404'
  import styles from './PrimaryLayout.less'
  
  const { Content } = Layout
  const { Header, Bread, Sider } = MyLayout
  
  @withRouter
  @connect(({ app, loading }) => ({ app, loading }))
  
  class PrimaryLayout extends PureComponent {
    state = {
      isMobile: false,
    }
  
    componentDidMount() {
      this.enquireHandler = enquireScreen(mobile => {
        const { isMobile } = this.state
        if (isMobile !== mobile) {
          this.setState({
            isMobile: mobile,
          })
        }
      })
    }
  
    componentWillUnmount() {
      unenquireScreen(this.enquireHandler)
    }
  
    onCollapseChange = collapsed => {
      this.props.dispatch({
        type: 'app/handleCollapseChange',
        payload: collapsed,
      })
    }
  
    render() {
      const { app, location, dispatch, children } = this.props
      const {
        user,
        theme,
        routeList,
        collapsed,
        permissions,
        datewite,
        notifications,
      } = app
      const { isMobile } = this.state
      const { onCollapseChange } = this
  
      // Localized route name.
      const newRouteList =
        langFromPath(location.pathname) === 'zh'
          ? routeList.map(item => {
              const { zhName, ...other } = item
              return {
                ...other,
                name: zhName,
              }
            })
          : routeList
      // Find a route that matches the pathname.
      const currentRoute = newRouteList.find(
        _ => _.route && pathMatchRegexp(_.route, location.pathname)
      )
      // Query whether you have permission to enter this page
      const hasPermission = currentRoute
        ? permissions.visit.includes(currentRoute.id)
        : false
  
      // MenuParentId is equal to -1 is not a available menu.
      const menus = newRouteList.filter(_ => _.menuParentId !== '-1')
  
      const headerProps = {
        newRouteList,
        collapsed,
        datewite,
        notifications,
        onCollapseChange,
        avatar: user.avatar,
        username: user.username,
        fixed: config.fixedHeader,
        onAllNotificationsRead() {
          dispatch({ type: 'app/allNotificationsRead' })
        },
        onSignOut() {
          dispatch({ type: 'app/signOut' })
        },
      }
  
      const siderProps = {
        theme,
        menus,
        isMobile,
        collapsed,
        onCollapseChange,
        onThemeChange(theme) {
          dispatch({
            type: 'app/handleThemeChange',
            payload: theme,
          })
        },
      }
  
      return (
        <Fragment>
          <Layout>
            {isMobile ? (
              <Drawer
                maskClosable
                closable={false}
                onClose={onCollapseChange.bind(this, !collapsed)}
                visible={!collapsed}
                placement="left"
                width={200}
                style={{
                  padding: 0,
                  height: '100vh',
                }}
              >
                <Sider {...siderProps} collapsed={false} />
              </Drawer>
            ) : (
              <Sider {...siderProps} />
            )}
            <div
              className={styles.container}
              style={{ paddingTop: config.fixedHeader ? 72 : 0 }}
              id="primaryLayout"
            >
              <Header {...headerProps} />
              <Content className={styles.content}>
                {hasPermission ? children : <Error />}
              </Content>
              <BackTop
                className={styles.backTop}
                target={() => document.querySelector('#primaryLayout>div')}
              />
            </div>
          </Layout>
        </Fragment>
      )
    }
  }
  
  
  export default PrimaryLayout
  