import React, { Component } from 'react';
import {   Dimensions,
           Image,
           ScrollView,
           StyleSheet,
           Text,
           TouchableOpacity,
           View,
           StatusBar} from 'react-native';
           import { Header } from 'native-base';
           import { Actions } from 'react-native-router-flux';

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 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,
      currentID: 'mapview',
    }
  }

  pressedMapButton(){
     this.setState({currentID: 'listview'})
  }
  pressedPayButton(){
     this.setState({currentID: 'paysuccess'})
  }
  pressedListViewButton(){
     this.setState({currentID: 'mapview'})
  }

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

  updateMenuState(isOpen) {
    this.setState({ isOpen })
  }

      renderSelectedView() {
      console.log(this.state.currentID);
      switch (this.state.currentID) {
            case 'listview':
              return (
                <ListView onPressButton={() => this.pressedListViewButton()} />
                );
            case 'paysuccess':
              return (
               <PaySuccess onPressButton={() => this.pressedPayButton()} />
                );
            case 'mapview':
              return (
                  <MapView onPressButton={() => this.pressedMapButton()} />
              );
      }
  }

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

    return (
      <SideMenu.FacebookStyle
        menu={menu}
        isOpen={this.state.isOpen}
        disableGestures={true}
        onChange={(isOpen) => this.updateMenuState(isOpen)}>
        <View style={styles.container}>
            <Header style={{height: 64, backgroundColor: '#00b5cc'}}>
                <View style={{height: 24, flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>

                    <TouchableOpacity style={styles.button} onPress={() => this.toggle()}>
                        <Image source={require('./images/menuSideBar/menu.png')} style={{width: 22, height: 14, marginLeft: 12}} />
                    </TouchableOpacity>

                    <Image style={[styles.button, {width: 130, height: 22}]} source={require('./images/logo/logo@2x.png')} />

                    <TouchableOpacity style={styles.button} onPress={Actions.qrCode}>
                        <Image source={require('./images/qrCode/qr-code@2x.png')} style={{width: 22, height: 24, marginLeft: 12}} />
                    </TouchableOpacity>
                </View>
            </Header>
            {this.renderSelectedView()}
        </View>
      </SideMenu.FacebookStyle>
    )
  }
}

const styles = StyleSheet.create({
  button: {
    width: 48,
    height: 28,
    top: 20,
    backgroundColor: 'orange'
  },
  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',
  }
});