const React = require('react'),
      {View, StyleSheet:{create}, Dimensions:{get}} = require('react-native'),
      PropTypes = require('prop-types'),
      {Switch} = require('react-router-dom'),
      {callAPI:{fetchPure}} = require('../utils'),
      {palette:{lightGreyTwo}} = require('../styles')

import {Drawer, Modal, Overlay, AppBar} from '../components'


class Shell extends React.Component{

  state={overlay:false, mobile:false, modal:false, drawer:true, properties:[], modalContent:''}

  componentWillMount = () => get('window').width < 460 ? this.setState({mobile: true}): null

  openOverlay = () => this.setState({overlay:true})
  closeOverlay = () => this.setState({overlay:false})
  openModal = modalContent => this.setState({modal:true, modalContent:modalContent})
  closeModal = () => this.setState({modal:false})


  getChildContext = () => ({
    mobile: this.state.mobile,
    overlay:this.state.overlay,
    openOverlay:this.openOverlay,
    openModal:this.openModal,
    closeModal: this.closeModal,
  })



  render (){
    const {children, propertyNames} = this.props
    const {drawer,properties, modal, overlay, modalContent} = this.state

    console.log(propertyNames)

    return <View  style={{minHeight:'100%', backgroundColor:lightGreyTwo}}>

      <View  style={drawer ? {marginLeft:270}:{}}>
          {localStorage.getItem('token') ? <AppBar toggleDrawer={()=> this.setState({drawer:!drawer})}/> : null}
          {children.map((child,i) =>React.cloneElement(child,{ key:i} ) )}
      </View>

      {drawer ? <Drawer propertyNames={propertyNames}  /> :null}

       {modal
        ? <Modal closeModal={this.closeModal} >
            {modalContent}
          </Modal>
        : null
      }

      { overlay ? <Overlay closeOverlay={this.closeOverlay} /> : null}


    </View>
  }
}


Shell.childContextTypes = {
  mobile: PropTypes.bool,
  overlay: PropTypes.bool,
  openOverlay: PropTypes.func,
  openModal: PropTypes.func,
  closeModal: PropTypes.func,
}

export default Shell