import React from 'react'
import PropTypes from 'prop-types'
// load all components that have css here
import { Layout, Panel } from 'react-toolbox'
import AppBar from '../../components/AppBar'
import Button from '../../components/Button'
import IconButton from '../../components/IconButton'
import NavDrawer from '../../components/NavDrawer'
import Navigation from 'react-toolbox/lib/navigation'
import BaseMenuList from '../../components/BaseMenuList'
import AppLoading from '../../components/AppLoading'
import theme from './theme.css'

const colorPrimaryOnPrimary = 'var(--color-text-primary-on-primary)'

class BaseLayout extends React.Component {
  constructor () {
    super()
    let loaded = false
    if (typeof window !== 'undefined') {
      loaded = window.__PAGE_LOADED__
    }
    this.state = {
      loaded: loaded
    }
    this.lastDrawerType = ''
  }

  componentDidMount () {
    window.__PAGE_LOADED__ = true
    this.setState({
      loaded: true
    })
    this.isMobile = document.body.getBoundingClientRect().width < 960
    window.onresize = () => {
      let isMobile = document.body.getBoundingClientRect().width < 960
      if (this.isMobile !== isMobile) {
        this.isMobile = isMobile
        this.setState({})
      }
    }
  }

  render () {
    let { appBar, drawer, loading } = this.props
    let loadingElement = loading ? (
      <AppLoading
        showed={!this.state.loaded}
        props={loading.props}>
        {loading.content ? loading.content : 'Loading'}
      </AppLoading>
    ) : null
    let drawerElement
    if (drawer) {
      let pinned = drawer.type === 'pinned' && !this.isMobile
      if (!pinned) {
        appBar.props = appBar.props ? appBar.props : {}
        appBar.props.leftIcon = appBar.props.leftIcon ? appBar.props.leftIcon : 'menu'
        appBar.props.onLeftIconClick = appBar.props.onLeftIconClick ? appBar.props.onLeftIconClick : drawer.toggleFn
      }
      let { contents } = drawer
      let contentElements = []
      if (contents) {
        contents.forEach((c, i) => {
          if (c.type === 'menuBar') {
            let menuBar = c.data
            if (menuBar) {
              contentElements.push(
                <div
                  key={i}>
                  <BaseMenuList
                    {...menuBar} />
                </div>
              )
            }
          } else if (c.type === 'logo') {
            let data = c.data
            let contentProps = {...data.props}
            let clickableClass = ' '
            if (contentProps.onClick) {
              clickableClass += theme.clickable
            }
            contentElements.push(
              <div key={i} className={theme.logo + clickableClass}>
                <img src={data.src} alt='logo' {...contentProps} />
              </div>
            )
          } else if (c.type === 'custom') {
            let data = c.data
            contentElements.push(
              <div key={i}>
                {data.content}
              </div>
            )
          }
        })
      }
      drawerElement = (
        <NavDrawer active={drawer.showed}
          pinned={pinned}
          onOverlayClick={appBar.props.onLeftIconClick}
          {...drawer.props}>
          <div style={{ position: 'relative', color: 'var(--nav-drawer-menu-color)' }}>
            {contentElements}
          </div>
        </NavDrawer>
      )
    }
    let appBarElement
    if (appBar) {
      let content
      if (appBar.toolbar) {
        let toolbar = appBar.toolbar
        let menus = []
        if (toolbar.menus) {
          toolbar.menus.forEach((m, i) => {
            let colorStyle = m.props && (m.props.primary || m.props.secondary || m.props.accent) ? {} : {
              color: colorPrimaryOnPrimary
            }
            if (m.type === 'iconButton') {
              menus.push(
                <IconButton
                  key={i}
                  className={theme.appBarMenu}
                  icon={m.text}
                  style={{...colorStyle}}
                  {...m.props} />
              )
            } else if (m.type === 'button') {
              menus.push(
                <Button
                  key={i}
                  className={theme.appBarMenu}
                  label={m.text}
                  style={{
                    ...colorStyle,
                    display: 'inline-block',
                    minWidth: 0
                  }}
                  {...m.props} />
              )
            }
          })
        }
        content = (
          <div className={theme.hiddenMobile}>
            <Navigation type='horizontal'>
              {menus}
            </Navigation>
          </div>
        )
      }
      appBarElement = (
        <AppBar
          title={appBar.title}
          flat={false}
          {...appBar.props}>
          {content}
        </AppBar>
      )
    }
    let layout = (
      <Layout>
        {drawerElement}
        <Panel>
          {loadingElement}
          {appBarElement}
          <div style={{ paddingTop: appBarElement ? 64 : 0 }}>
            {this.props.children}
          </div>
        </Panel>
      </Layout>
    )
    return layout
  }
}

BaseLayout.propTypes = {
  appBar: PropTypes.object,
  drawer: PropTypes.object,
  loading: PropTypes.object,
  theme: PropTypes.object,
  children: PropTypes.any
}

export default BaseLayout