import React from 'react'
import Drawer from 'material-ui/Drawer'
import BaseMenuList from '../BaseMenuList'
import PropTypes from 'prop-types'
import docked from './docked.css'
import theme from './theme.css'

class BaseDrawer extends React.Component {
  constructor () {
    super()
  }

  toggleDrawer (showed) {
    if (this.props.onToggleDrawer) {
      this.props.onToggleDrawer(showed)
    }
  }

  render () {
    let drawer = this.props
    let drawerType = drawer.type
    let drawerElement
    let drawerProps = {}
    let contentElements = []
    drawerProps = {...drawerProps, ...drawer.props}
    if (drawer.type === 'temporary') {
      drawerProps.SlideProps = drawer.containerProps
    } else {
      drawerProps.style = { ...drawerProps.style, ...drawer.containerProps.style }
      if (!drawerProps.style.background && !drawerProps.style.backgroundColor && !drawerProps.style.backgroundImage) {
        drawerProps.style.background = '#FFF'
      }
      drawerProps.classes = drawerProps.classes ? drawerProps.classes : docked
      switch (drawer.type) {
        case 'responsive': // responsive will not be sent to here (mestinya)
          drawerType = 'temporary'
          break
        case 'mini':
          drawerType = 'permanent'
          break
        default: break
      }
    }
    let autoToggleFn = {}
    let { contents } = drawer
    if (contents) {
      contents.forEach((c, i) => {
        if (c.type === 'menuBar') {
          let menuBar = c.data
          if (menuBar) {
            if (menuBar.autoToggle) {
              autoToggleFn.onClick = this.toggleDrawer.bind(this, false)
              autoToggleFn.onKeyDown = this.toggleDrawer.bind(this, false)
            }
            contentElements.push(
              <div
                key={i}
                {...autoToggleFn}>
                <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>
          )
        }
      })
    }
    let drawerContentStyle = { width: 300, ...drawer.contentStyle }
    drawerElement = (
      <Drawer open={this.props.open} onRequestClose={this.toggleDrawer.bind(this, false)} {...drawerProps} type={drawerType}>
        <div
          style={drawerContentStyle}>
          {contentElements}
        </div>
      </Drawer>
    )
    return drawerElement
  }
}

BaseDrawer.propTypes = {
  type: PropTypes.string,
  contents: PropTypes.array,
  contentStyle: PropTypes.object,
  props: PropTypes.object,
  open: PropTypes.bool,
  onToggleDrawer: PropTypes.func
}

export default BaseDrawer