import React, { Component } from 'react';
import {   Dimensions,
           Image,
           ScrollView,
           StyleSheet,
           Text,
           TouchableOpacity,
           View,
           StatusBar} from 'react-native';
import SideMenu from './components/SideMenu.js'
import ListView from './ListView.js'
import MapView from './MapView.js'
import PaySuccess from './PaySuccess.js'
import HeaderList from './components/HeaderList';

import BackgroundImage from './components/BackgroundImage';

const window = Dimensions.get('window')

class Button extends Component {
  handlePress(e) {
    if (this.props.onPress) {
      this.props.onPress(e)
    }
  }

  render() {
    return (
      <TouchableOpacity
        onPress={this.handlePress.bind(this)}
        style={this.props.style}>
        <Text>{this.props.children}</Text>
      </TouchableOpacity>
    )
  }
}

class Menu extends Component {
  render() {
    return (
    <Image source={require('./images/backgroundImage/background.png')} style={{ flex: 1, width: window.width, height: window.height,padding: 20}}>

      <ScrollView scrollsToTop={false} style={styles.menu}>
        <View style={styles.avatarContainer}>
          <Text style={styles.name}>Main Menu</Text>
        </View>
        <View style={{marginTop: 32}}>
          <Text style={styles.item}>
            Locales cerca tuyo
          </Text>

          <Text style={styles.item}>
            Mis Pedidos
          </Text>

          <Text style={styles.item}>
            Notificaciones
          </Text>
        </View>
      </ScrollView>
      </Image>
    );
  }
}

export default class Basic extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isOpen: false
    }
  }

  toggle() {
    this.setState({ isOpen: !this.state.isOpen })
  }

  updateMenuState(isOpen) {
    this.setState({ isOpen })
  }
  renderSelectedView() {
      switch (app) {
            case 'listview':
              return (
                <ListView>
                </ListView>
                );
            case 'paysuccess':
              return (
               <PaySuccess>
               </PaySuccess>
                );
            case 'mapview':
              return (
                <MapView>
                </MapView>
                );
            default:
              return (
                  <View style={styles.lvl2}>
                  <Text>Null</Text>
                  </View>
              );
      }
  }

  render() {
    const menu = <Menu onItemSelected={this.onMenuItemSelected} />

    return (
      <SideMenu.FacebookStyle
        menu={menu}
        isOpen={this.state.isOpen}
        onChange={(isOpen) => this.updateMenuState(isOpen)}>
        <View style={styles.container}>
            <HeaderList />
                {this.renderSelectedView()}
        </View>
      </SideMenu.FacebookStyle>
    )
  }
}

const styles = StyleSheet.create({
  button: {
    position: 'absolute',
    top: 20,
    padding: 10
  },
  caption: {
    fontSize: 20,
    fontWeight: 'bold',
    alignItems: 'center'
  },
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    backfaceVisibility: 'visible'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5
  },
  avatarContainer: {
    marginBottom: 20,
    marginTop: 20,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    flex: 1,
  },
  name: {
    position: 'absolute',
    top: 20,
    color: '#8e8788',
    fontSize: 15,
    fontFamily: 'CircularStd_Book',
  },
  item: {
    fontSize: 15,
    fontFamily: 'CircularStd_Book',
    marginTop: 32,
    color: 'white',
  }
});