import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, TouchableHighlight} from 'react-native'
import { createDrawerNavigator, createAppContainer } from 'react-navigation'
import POSMobileAbout from './POSMobileAbout';
import POSMobileData from './POSMobileData';
import POSMobileBuy from './POSMobileBuy';

export default class POSMobile extends Component {
    render() {
      return (
          <MyApp />
      )
    }
  }

class ThisPOSMobile extends Component {
  render() {
    return (
        <View style={styles.containerMain}>
            <View style={{height:24}}>

            </View>
            <View style={{flex:1, alignItems:'center',
                        justifyContent:'space-around',
                        backgroundColor:'orange'}}>
                <Text style={{fontSize:30,
                            color:'white'}}>APLIKASI KASIR</Text>
            </View>
            <View style={{flex:3, alignItems:'center',
                        justifyContent:'space-around',
                        margin:10}}>
                <Image  style={{width: 240, height: 240}}
                        source={require('./img/cashier.png')}/>
            </View>
            <View style={{flex:3}}>
                <View style={{flex:1,
                            flexDirection:'row'}}>
                    <View style={{flex:1,
                                alignItems:'center',
                                justifyContent:'space-around',
                                backgroundColor:'orange',
                                borderRadius:20,
                                margin:5}}>
                        <TouchableHighlight style={{ flex: 1,
                                                  alignItems: 'center',
                                                  justifyContent: 'center',
                                                  borderRadius: 20,
                                                  backgroundColor: 'orange',
                                                  margin: 10, }}
                                            onPress={ () => this.props.navigation.navigate('ScreenBuy')}
                                            underlayColor='#F4B400'
                                            ><Text style={{color:'white', fontSize:25}}>Penjualan</Text></TouchableHighlight>
                    </View>
                    <View style={{flex:1,
                                alignItems:'center',
                                justifyContent:'space-around',
                                backgroundColor:'orange',
                                borderRadius:20,
                                margin:5}}>
                        <TouchableHighlight style={{ flex: 1,
                                                  alignItems: 'center',
                                                  justifyContent: 'center',
                                                  borderRadius: 20,
                                                  backgroundColor: 'orange',
                                                  margin: 10, }}
                                            onPress={ () => this.props.navigation.navigate('ScreenData')}
                                            underlayColor='#F4B400'
                                            ><Text style={{color:'white', fontSize:25}}>Daftar Menu</Text></TouchableHighlight>
                    </View>
                </View>
                <View style={{flex:1,
                            justifyContent:'space-around'}}>
                    <View style={{flex:1,
                    alignItems:'center',
                    justifyContent:'space-around',
                    backgroundColor:'orange',
                    borderRadius:20,
                    margin:5}}>
                    <TouchableHighlight style={{ flex: 1,
                                                  alignItems: 'center',
                                                  justifyContent: 'center',
                                                  borderRadius: 20,
                                                  backgroundColor: 'orange',
                                                  margin: 10, }}
                                            onPress={ () => this.props.navigation.navigate('ScreenAbout')}
                                            underlayColor='#F4B400'
                                            ><Text style={{color:'white', fontSize:25}}>Tentang Kami</Text></TouchableHighlight>
                    </View>
                </View>
            </View>
            <View style={{flex:1, alignItems:'center',
                        justifyContent:'space-around',
                        backgroundColor:'red'}}>
                <Text style={{color:'white', fontSize:14}}>UD.Sri Ferrdian - Jalan Jend. Sudirman Gg 3 No. 7</Text>
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    containerMain: {
        flex: 1,
    }
})

const MyDrawerNavigator = createDrawerNavigator(
    {
      ScreenHome: {
        screen: ThisPOSMobile,
      },
      ScreenBuy: {
        screen: POSMobileBuy,
      },
      ScreenData: {
        screen: POSMobileData,
      },
      ScreenAbout: {
        screen: POSMobileAbout,
      },
    },
    {
      initialRouteName: "ScreenHome",
    }
  );

const MyApp = createAppContainer(MyDrawerNavigator);