import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet, Image,FlatList } from "react-native";
import FastImage from 'react-native-fast-image'
import Icon from "react-native-vector-icons/FontAwesome5";
import { colors } from "../../assets/styles/colors-theme";
import { Fonts } from '../../assets/styles/fonts-theme'
import history from "../../common/history";
import LoadingView from '../../common/loading';
import NaviBar from "../../components/navi-bar";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Migrations from "../../services/realm/Mirgrations";
import { inject, observer } from "mobx-react";
import { width, height } from "../../common/screen";



export default class ReceiptList extends Component {


  constructor(props) {
    super(props);
  }

  statusReturn(){
     if(this.props.items.status == 'Pending Payment'){
       return('未確認收款')
     }else{
       if(this.props.items.chara == "owner"){
        return('已收款')
       }else{
        return('已交租金')
       }
     }
  }

  render() {
    return (
        <TouchableOpacity style = {{marginTop:10,marginBottom:10,marginLeft:10,marginRight:10}}
        onPress = {this.props.onPress && this.props.onPress}>
           <View style = {{flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
              <View>
                 <Text style = {styles.textView}>
                    {'Receipt ID: '+this.props.items.id}
                 </Text>
                 <Text style = {styles.textView}>
                    {'Date: '+this.props.items.date}
                 </Text>
                 <Text style = {styles.textView}>
                    {'Rent: '+"HKD "+this.props.items.rent}
                 </Text>
                 <Text style = {styles.textView}>
                    {'Status: '}
                    <Text style = {[styles.textView,{color:colors.mainColor}]}>
                   {this.statusReturn()}
                    </Text>
                 </Text>
              </View>
                  <Icon color = {colors.textColor} name = {'angle-right'} size = {30}/>
           </View>
          <View style = {{height:1,width:width-20,backgroundColor:colors.textColor,marginTop:15}}/>
        </TouchableOpacity>
      
    );
  }


}

const styles = StyleSheet.create({
  container: {
    flex: 1,

  },
  textView:{
    fontFamily:Fonts.ubuntu,
    color:colors.textColor,

  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  button: {
    borderWidth: 1,
    borderColor: "#000000",
    margin: 5,
    padding: 5,
    width: "70%",
    backgroundColor: "#DDDDDD",
    borderRadius: 5,
  },
  textField: {
    borderWidth: 1,
    borderColor: "#AAAAAA",
    margin: 5,
    padding: 5,
    width: "70%"
  },
  spacer: {
    height: 10,
  },
  title: {
    fontWeight: "bold",
    fontSize: 20,
    textAlign: "center",
  }
});