import React, { Component } from 'react'
import { ScrollView, KeyboardAvoidingView, View, TouchableWithoutFeedback, Image, Content, ImageBackground, TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
import { Container, Text, Left, Right, Header, Icon, CardItem, Card, Button } from 'native-base';
import Inpoin from '../Images/inpoin_logo.png'
import styles from './Styles/DompetInpoinScreenStyle'
import dompetInpoinAction from "../Redux/DompetInpoinRedux";

const { dompetInpoinAction } = this.props;

class DompetInpoinScreen extends Component {
  onclick = (errors) => {
    console.log({errors})
    alert('On click works')
  }
  render () {
    return (
      <Container style={{ backgroundColor: '#FFFFFF' }}>
        <View>
          <Header noShadow={true} style={{ backgroundColor: '#FFFFFF' }}>
            <Left>
              <TouchableWithoutFeedback onPress={this.onclick}>
                <Image resizeMode="contain" style={{ height: '70%', width: '100%' }} source={require('../Images/inpoin_logo.png')} />
              </TouchableWithoutFeedback>
            </Left>
            <Right>
              <TouchableWithoutFeedback onPress={this.onclick}>
                <Image resizeMode="contain" style={{right: 10}} source={require('../Images/account_circle.png')} />
              </TouchableWithoutFeedback>
              <TouchableWithoutFeedback onPress={this.onclick}>
                <Image resizeMode="contain" source={require('../Images/history.png')} />
              </TouchableWithoutFeedback>
            </Right>
          </Header>
          </View>
          <View>
          <View style={{ marginTop: 28, flexDirection: 'row' }}>
          <Left>
              <View style={{ justifyContent: 'flex-start', left: 20 }}>
                <Text style={{ fontSize: 14, fontWeight: 'bold' }}>Dompet InPoin</Text>
              </View>
            </Left>
            <Right>
              <View style={{ borderBottomWidth: 1, borderBottomColor: '#C4C4C4', width: '125%', justifyContent: 'flex-end' }} />
            </Right>
          </View>
          <ScrollView style={{ marginTop: 20 }}>
              <Card style={{ width: '90%', borderRadius: 5, justifyContent: 'center', alignSelf: 'center' }}>
              <CardItem style={{ borderRadius: 5 }}>
                <View>
                  <Image resizeMode="contain" source={require('../Images/link_aja.png')} />
                </View>
                <View style={{ flexDirection: 'column', width: '50%', left: 10 }}>
                  <Text style={{ fontSize: 9, fontWeight: 'bold' }}>Link Aja!</Text>
                  <Text style={{ fontSize: 9 }}>{this.props.dompetInpoin.friends.provider}</Text>
                  <View style={{ top: 5 }}>
                  <TouchableOpacity onPress={() => this.onclick} style={{ width: '55%', elevation: 2, shadowOpacity: 1, backgroundColor: '#E11715', height: 35, borderRadius: 5 }}>
                    <Text style={{ color: '#FFFFFF', textAlignVertical: "center",
                textAlign: "center", top: 8, fontSize: 12, fontWeight: 'bold' }}>Hubungkan</Text>
                  </TouchableOpacity>
                  </View>
                </View>
                <Right style={{ left: 10 }}>
                <TouchableWithoutFeedback onPress={this.onclick}>
                  <Image resizeMode="contain" source={require('../Images/switch_disable.png')} />
                </TouchableWithoutFeedback>
                </Right>
              </CardItem>
              </Card>
          </ScrollView>
          </View>
      </Container>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    dompetInpoin: state.dompetInpoin
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    dompetInpoinAction : dompetInpoinAction.dompetInpoinRequest
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(DompetInpoinScreen)