import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Platform, View, Text, TextInput, TouchableHighlight, AsyncStorage, Image, ScrollView, Modal } from "react-native";
import Numeral from 'numeral';
import { NetworkInfo } from 'react-native-network-info';
import SmsListener from 'react-native-android-sms-listener';
import axios from 'axios';
import { Icon } from 'react-native-elements';

import t from 'tcomb-form-native';
import * as css from '../styles/Styles';
import { NativeModules } from 'react-native';

import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../utility/Constants';
import { Header } from 'react-navigation';

const HEADER_HEIGHT = Header.HEIGHT;


const CallLogs = NativeModules.CallLogs;
const Form = t.form.Form;




export const req = async (args) => {
	console.log('req args:')
	console.log(args)
    try {
        const response = await axios(args.url, {
            method: args.method,
            headers: args.headers,
            data: JSON.stringify(args.body)
        });
        return response.data
    } catch (e) {
        console.log('error object', Object.keys(e));
        if (typeof e != 'object') console.log('error: ', e);
    }
};





export const formStyles = {
    ...Form.stylesheet,
    formGroup: {
        normal: css.styles.textInputWithTitleContainer,
        error: css.styles.textInputWithTitleContainer
    },
    controlLabel: {
        normal: css.styles.textInputWithTitleLabelStyle,
        error: {
			fontWeight: '500',
			fontFamily: 'sans-serif-light',
			fontSize: 13,
			color: 'red',
			paddingBottom: 5,
			letterSpacing: 5
        }
    },
    textbox: {
        normal: {
        	backgroundColor: '#e6e8e8',
			fontSize: 17,
			padding: 7,
			marginBottom: 5,
        	color: 'black'
        },
        error: {
        	backgroundColor: '#e6e8e8',
			fontSize: 17,
			padding: 7,
			marginBottom: 5,
        	color: 'red'
        }
    },
    pickerContainer: {
        normal: {
			backgroundColor: '#e6e8e8',
			color: 'black'
        },
        open: {},
        error: {
            backgroundColor: '#e6e8e8',
            color: 'red'
        }
    },
	dateValue: {
		normal: {
			backgroundColor: '#e6e8e8',
			color: 'black',
			fontSize: 17,
			padding: 7,
			marginBottom: 5
		},
		error: {}
	},
};

function currencyTextBox(locals) {
	if (locals.hidden) {
		return null;
	}

	var stylesheet = locals.stylesheet;
	var formGroupStyle = stylesheet.formGroup.normal;
	var controlLabelStyle = stylesheet.controlLabel.normal;
	var textboxStyle = stylesheet.textbox.normal;
	var textboxViewStyle = stylesheet.textboxView.normal;
	var helpBlockStyle = stylesheet.helpBlock.normal;
	var errorBlockStyle = stylesheet.errorBlock;

	if (locals.hasError) {
		formGroupStyle = stylesheet.formGroup.error;
		controlLabelStyle = stylesheet.controlLabel.error;
		textboxStyle = stylesheet.textbox.error;
		textboxViewStyle = stylesheet.textboxView.error;
		helpBlockStyle = stylesheet.helpBlock.error;
	}

	if (locals.editable === false) {
		textboxStyle = stylesheet.textbox.notEditable;
		textboxViewStyle = stylesheet.textboxView.notEditable;
	}

	var label = locals.label ? (
		<Text style={controlLabelStyle}>{locals.label}</Text>
		) : null;

	var help = locals.help ? (
		<Text style={helpBlockStyle}>{locals.help}</Text>
		) : null;

	var error =
		locals.hasError && locals.error ? (
			<Text accessibilityLiveRegion="polite" style={errorBlockStyle}>
				{locals.error}
			</Text>
		) : null;

	let customStyle = {
		searchSection: {
		    flex: 1,
		    flexDirection: 'row',
		    justifyContent: 'center',
		    alignItems: 'center',
		    backgroundColor: '#fff',
		},
		searchIcon: {
		    paddingTop: 7,
		    paddingRight: 0,
		    paddingBottom: 7,
		    paddingLeft: 7,
		    marginBottom: 5,
		    backgroundColor: '#e6e8e8',
		    fontSize: 17,
		    color: 'black',
		},
		input: {
		    flex: 1,
		},
	}

	return (
		<View style={formGroupStyle}>
			{label}
			<View style={[customStyle.searchSection, textboxViewStyle]}>
				<TextInput
					style={customStyle.searchIcon}
					value='₦'
					editable={false}
				/>
				<TextInput
					accessibilityLabel={locals.label}
					ref="input"
					autoCapitalize={locals.autoCapitalize}
					autoCorrect={locals.autoCorrect}
					autoFocus={locals.autoFocus}
					blurOnSubmit={locals.blurOnSubmit}
					editable={locals.editable}
					keyboardType={locals.keyboardType}
					maxLength={locals.maxLength}
					multiline={locals.multiline}
					onBlur={locals.onBlur}
					onEndEditing={locals.onEndEditing}
					onFocus={locals.onFocus}
					onLayout={locals.onLayout}
					onSelectionChange={locals.onSelectionChange}
					onSubmitEditing={locals.onSubmitEditing}
					onContentSizeChange={locals.onContentSizeChange}
					placeholderTextColor={locals.placeholderTextColor}
					secureTextEntry={locals.secureTextEntry}
					selectTextOnFocus={locals.selectTextOnFocus}
					selectionColor={locals.selectionColor}
					numberOfLines={locals.numberOfLines}
					underlineColorAndroid={locals.underlineColorAndroid}
					clearButtonMode={locals.clearButtonMode}
					clearTextOnFocus={locals.clearTextOnFocus}
					enablesReturnKeyAutomatically={locals.enablesReturnKeyAutomatically}
					keyboardAppearance={locals.keyboardAppearance}
					onKeyPress={locals.onKeyPress}
					returnKeyType={locals.returnKeyType}
					selectionState={locals.selectionState}
					onChangeText={value => locals.onChange(value)}
					onChange={locals.onChangeNative}
					placeholder={locals.placeholder}
					style={[customStyle.input, textboxStyle]}
					value={locals.value}
				/>
			</View>
			{help}
			{error}
		</View>
	);
}

export const getFieldsFromArray = (fields, text) => {
	let found_fields = []
	let find_fields = (arr) => {
		arr.forEach( (f) => {
			if (Array.isArray(f)) {
				find_fields(f)
			} else {
				if (f.indexOf(text) !== -1) {
					found_fields.push(f)
				}
			}
		})
	}
	find_fields(fields)
	return found_fields
};

export const getFieldsOfType = (form_structure, fieldType) => {
	let found_fields = []
	let find_fields = (arr) => {
		arr.forEach((f) => {
			if (Array.isArray(f)) {
				find_fields(f)
			}
			if (f.fieldType == fieldType) {
				found_fields.push(f.fieldName)
			}
		})
	}
	find_fields(form_structure)
	return found_fields
}

export const NumberType = (frm)=>{
	var max,min;

	if (frm.limit){
		max = frm.limit.hasOwnProperty('max') ? frm.limit.max : Infinity
		min = frm.limit.hasOwnProperty('min') ? frm.limit.min : -Infinity
	}

	var NumberType = t.refinement(t.Number, function (n) {
		if (frm.limit){
			return ( (n >= min) && (n <= max) )
		}
		return n;
	});

	return NumberType;
}

export const NumberTypeError = (frm)=>{
	var max, min, max_str, min_str;

	if (frm.limit) {
		max = frm.limit.hasOwnProperty('max') ? frm.limit.max : Infinity
		min = frm.limit.hasOwnProperty('min') ? frm.limit.min : -Infinity
		max_str = max
		min_str = min
		if (frm.fieldType == 'currency') {
			if (!(max == Infinity)) max_str = '₦ ' + Numeral(max).format('0,0');
			if (!(min == -Infinity)) min_str = '₦ ' + Numeral(min).format('0,0');
		}
	}

	return function (value, path, context) {
		var msg;
		if ( !((value === '') || (value === null)) ) {
			if (value > max) {
				msg = 'Maximum is ' + max_str
			} else if (value < min) {
				msg = 'Minimum is ' + min_str
			}
		} else {
			msg = 'This field is required'
		}
		return msg;
	};
}

export const makeForm = (formStructure, dropDownOption, app_form_read_only=false) => {

	if (app_form_read_only) {
		return makeReadOnlyForm(formStructure)
	}

	t.refinement(t.Number, function (n) {
		return n >= 0;
	});

    let formObj = {};

    formStructure.forEach((frm) => {
        if (frm.fieldType == 'date' && !app_form_read_only) {
            formObj[frm.fieldName] = t.Date
        } else if (frm.fieldType == 'data'){
            formObj[frm.fieldName] = (frm.mandatory ? t.String : t.maybe(t.String))
        } else if (frm.fieldType == 'select' && !app_form_read_only){
            formObj[frm.fieldName] = (frm.mandatory ? t.enums( dropDownOption[frm.fieldName] || {} ) : t.maybe(t.enums( dropDownOption[frm.fieldName] || {} )))
        } else if (frm.fieldType == 'number' || frm.fieldType == 'currency'){
            formObj[frm.fieldName] = (frm.mandatory ? NumberType(frm) : t.maybe(t.Number))
        } else if (frm.fieldType == 'list' && !app_form_read_only) {
        	formObj[frm.fieldName] = (frm.mandatory ? t.list(t.String) : t.maybe(t.list(t.String)))
        } else {
        	formObj[frm.fieldName] = (frm.mandatory ? t.String : t.maybe(t.String))
        }
    })

    return t.struct(formObj);
}

export const makeFormOptions = (formStructure, formProps=null, app_form_read_only=false, customStyles=null) => {

	if (app_form_read_only) {
		return makeReadOnlyFormOptions(formStructure)
	}

	let optionsObj = {};

	for(let idx=0; idx < formStructure.length; idx++) {

		optionsObj[formStructure[idx].fieldName] = {
			label:formStructure[idx].label
		}

		if (formProps){
			optionsObj[formStructure[idx].fieldName]['onSubmitEditing'] = (event) => {
				let current_field = formStructure[idx].fieldName,
					next_field = idx+1 < formStructure.length ? formStructure[idx+1].fieldName : null ;
				formProps.prepareForm(current_field, next_field, event, formProps.onSubmitEditing)
			}
		}

		if (formStructure[idx].placeholder) {
			optionsObj[formStructure[idx].fieldName]['placeholder'] = formStructure[idx].placeholder
		}

		if (formStructure[idx].mandatory) {
			optionsObj[formStructure[idx].fieldName]['error'] = formStructure[idx].errorMessage || 'this field is required.'
		}

		if (formStructure[idx].fieldType == 'date') {
			optionsObj[formStructure[idx].fieldName]['mode'] = 'date'
			optionsObj[formStructure[idx].fieldName]['config'] = {
                format: (date) => formatDate(date),
                dialogMode: 'spinner'
            }
		} else if (formStructure[idx].fieldType  == 'currency') {
			optionsObj[formStructure[idx].fieldName]['error'] = NumberTypeError(formStructure[idx])
			optionsObj[formStructure[idx].fieldName]['template'] = currencyTextBox
			optionsObj[formStructure[idx].fieldName]['transformer'] = {
				format: value => {
					if (parseFloat(value)) {
						return Numeral(value).format('0,0')
					} else {
						return null
					}
				},
				parse: value => {
					if (parseFloat((value || '').replace(',',''))) {
						return parseFloat(value.replace(/,/g,''));
					} else {
						return null;
					}
				}
			};

		} else if (formStructure[idx].fieldType  == 'number') {
			optionsObj[formStructure[idx].fieldName]['error'] = NumberTypeError(formStructure[idx])
		} else if (formStructure[idx].fieldType  == 'list') {
			optionsObj[formStructure[idx].fieldName]['item'] = {
			    label: 'My tag'
			}
		}

		if (idx == formStructure.length-1) {
			optionsObj[formStructure[idx].fieldName]['returnKeyType'] = 'done'
		} else {
			optionsObj[formStructure[idx].fieldName]['returnKeyType'] = 'go'
		}
	}

	optionsObj = {
		stylesheet: customStyles || formStyles,
		auto:'placeholders',
		fields:optionsObj
	}

	return optionsObj
}

export const isFormEmpty = (form_obj) => {
	let is_empty = true;
    Object.keys(form_obj).forEach((key) => {
        if (key.indexOf('date') !== -1) {
            return false;
        }
        if (form_obj[key]) {
            is_empty = false;
        }
    })
    return is_empty
}


export const makeReadOnlyForm = (formStructure) => {

    let formObj = {};

    formStructure.forEach((frm) => {
        if (frm.fieldType == 'number' || frm.fieldType == 'currency'){
            formObj[frm.fieldName] = t.maybe(t.Number)
        } else {
        	formObj[frm.fieldName] = t.maybe(t.String)
        }
    })

    return t.struct(formObj);
}

const readonlyFormStyles = {
    ...Form.stylesheet,
    formGroup: {
        normal: css.styles.textInputWithTitleContainer,
        error: css.styles.textInputWithTitleContainer
    },
    controlLabel: {
        normal: css.styles.textInputWithTitleLabelStyle,
        error: css.styles.textInputWithTitleLabelStyle
    },
    textbox: {
        normal: {
        	backgroundColor: '#e6e8e8',
			fontSize: 17,
			padding: 7,
			marginBottom: 5,
        	color: 'black'
        },
        error: {
        	backgroundColor: '#e6e8e8',
			fontSize: 17,
			padding: 7,
			marginBottom: 5,
        	color: 'red'
        },
		notEditable: {
        	backgroundColor: '#e6e8e8',
			fontSize: 17,
			padding: 7,
			marginBottom: 5,
        	color: 'black'
		}
    },
    pickerContainer: {
        normal: {
			backgroundColor: '#e6e8e8',
			color: 'black'
        },
        open: {},
        error: {
            backgroundColor: '#e6e8e8',
            color: 'red'
        }
    },
	dateValue: {
		normal: {
			backgroundColor: '#e6e8e8',
			color: 'black',
			fontSize: 17,
			padding: 7,
			marginBottom: 5
		},
		error: {}
	},
	textboxView: {
		normal: {
		    flex: 1,
		    backgroundColor: '#e6e8e8',
		},
		error: {
		    flex: 1,
		    backgroundColor: '#e6e8e8',
		},
		notEditable: {
		    flex: 1,
		    backgroundColor: '#e6e8e8',
		}
	},
};

export const makeReadOnlyFormOptions = (formStructure) => {

	let optionsObj = {};

	for(let idx=0; idx < formStructure.length; idx++) {
		optionsObj[formStructure[idx].fieldName] = {
			label: formStructure[idx].label,
			placeholder: formStructure[idx].placeholder,
			editable: false
		}
		 if (formStructure[idx].fieldType  == 'currency') {
			optionsObj[formStructure[idx].fieldName]['template'] = currencyTextBox
		}
	}

	optionsObj = {
		stylesheet:readonlyFormStyles,
		auto:'placeholders',
		fields:optionsObj
	}

	return optionsObj
}

export const fixDateFormat = (date) => {
	if (typeof date === 'string' || date instanceof String){
	    let sep = (date.indexOf('/') !== -1) ? '/' : '-';
	    if (date.indexOf(sep) !== -1){
	        nd = date.split(sep);
	        if (nd.length == 3 && nd[0] < 32) {
	        	return [nd[1], nd[0], nd[2]].join('/');
	        } else if (nd[0].length == 4) {
	        	return [nd[1], nd[2], nd[0]].join('/');
	        }
	    }
    }
    return date
}

export const formatDate = (date) => {

    date_ = fixDateFormat(date)
    let d = new Date(date);

    if (d == 'Invalid Date'){
    	throw 'Invalid Date';
    }

    var month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [day, month, year].join('/');
}

const InfoGrid = ({data,rowStyle,labelStyle,valueStyle, valStyle,labStyle,showAll,invertLabelPosition}) => {
	var data_lst = [];
	var tmp_value;
	for (var i=0; i<data.length; i++){
		if (data[i].grid_view || showAll) {
			if (data[i].value_type == 'currency') {
				tmp_value =  Numeral(data[i].value).format('0,0.00') + ' NGN'
			} else {
				tmp_value = data[i].value
			}
			let topComponent = <Text style={valueStyle}>{tmp_value}</Text>
			let bottomComponent = <Text style={labelStyle}>{data[i].label}</Text>
			if (invertLabelPosition) {
				[topComponent,bottomComponent] = [bottomComponent,topComponent]
			}
			data_lst.push(
				<View style={rowStyle} key={i}>
					{topComponent}
					{bottomComponent}
				</View>
			)
		}
	};
	return (
		[...data_lst]
	);
};

const MakeLinks = ({ onPress,data,baseStyle,labelStyle,valueStyle,
					 colorData, underlayColor}) => {
	var data_lst = []
	for (var i=0; i<data.length; i++){
		let tmp_data = data[i],
			tmp_baseStyle;
		if (i == 0){
			tmp_baseStyle = [baseStyle, {marginTop:0}]
		} else {
			tmp_baseStyle = baseStyle
		}
		tmp_data = [
			{label:'Date Requested:', value:formatDate(tmp_data.date_requested)},
			{label:'Date Approved:', value:tmp_data.date_approved && formatDate(tmp_data.date_approved)},
			{label:'Loan Amount:', value:'₦ ' + Numeral(tmp_data.principal).format('0,0.00')},
			{label:'Tenor:', value:tmp_data.tenor},
			{label:'Interest Rate:', value:tmp_data.interest_rate||'-' + '%'},
			{label:'Amount Repaid:', value:'₦ ' + Numeral(tmp_data.amount_repaid).format('0,0.00')},
			{label:'Amount Due:', value:'₦ ' + Numeral(tmp_data.outstanding_amount).format('0,0.00')},
			{label:'Loan Product:', value:tmp_data.loan_product},
			{label:'Bank Paid To:', value:tmp_data.bank_paid_to},
			{label:'Account Paid To:', value:tmp_data.account_paid_to},
			{label:'Reason for Loan:', value:tmp_data.reason_for_loan},
			{label:'Loan Status:', value:tmp_data.loan_status},
			{label:'Installments Paid:', value:tmp_data.installments_paid}
		]
		let installments = data[i].installments;
		let next_repayment = installments.find(i=>i.total_due > 1); // undefined if none found
		let statusCode = '01'; // assume fully paid by default
		if (next_repayment) {
			// check if next repayment due date is past
			statusCode = ((new Date(fixDateFormat(next_repayment.due_date)) > Date.now()) && '02')||'03'
		}
		data[i]['statusCode'] = statusCode;

		data_lst.push(
			<View key={100+i}>
				<InfoGridLink
					colorData={colorData}
					data={data[i]}
					baseStyle={tmp_baseStyle}
					labelStyle={labelStyle}
					valueStyle={valueStyle}
					underlayColor={underlayColor}
					onPress={ ()=>onPress("LoanHistoryItem", {data:tmp_data, installments}) }
				/>
			</View>
		)
	};
	return data_lst;
};

const InfoGridLink = ({ onPress,data,baseStyle,labelStyle,valueStyle,
						colorData,underlayColor }) => {

	let color = colorData[data.statusCode];
	let amtValue = Numeral(data.outstanding_amount).format('0,0.00') + ' NGN';
	if (data.statusCode == '01') amtValue = '';

	return (
		<TouchableHighlight
			style={baseStyle}
			onPress={ onPress }
			underlayColor={underlayColor}
		>
			<View>
				<View style={{flexDirection:'row'}}>
					<View style={{flex:0.5}}>
						<Text style={valueStyle[0]}>{Numeral(data.principal).format('0,0.00') + ' NGN'}</Text>
						<Text style={labelStyle[0]}>Amount Obtained</Text>
					</View>
					<View style={{flex:0.5, alignItems:'flex-end'}}>
						<Text style={valueStyle[1]}>{formatDate(data.date_requested)}</Text>
						<Text style={labelStyle[1]}>Date Taken</Text>
					</View>
				</View>
				<View style={{flexDirection:'row'}}>
					<View style={{flex:0.5}}>
						<Text style={valueStyle[2]}>{data.reason_for_loan}</Text>
						<Text style={labelStyle[2]}>Loan Reason</Text>
					</View>
					<View style={{flex:0.5, alignItems:'flex-end'}}>
						<View style={{flex:0.73}}>
							<Text style={valueStyle[3]}>{amtValue}</Text>
						</View>
						<View style={{flex:0.27}}>
							<Text style={[labelStyle[3], {color:color.color}]}>{color.text}</Text>
						</View>
					</View>
				</View>
			</View>
		</TouchableHighlight>
	);
};

InfoGridLink.PropTypes = {
    onPress: PropTypes.func,
    title: PropTypes.string
};

export {InfoGridLink, InfoGrid, MakeLinks};



export const sendLocation = async (taskKey, userObject, location, user_event, source) => {

    let location_data = JSON.stringify({...location, source}, null, 2),
        prev_location,
        event_type;

    prev_location = await AsyncStorage.getItem('@user:user_location')
    prev_location = prev_location ? JSON.parse(prev_location) : {...location, source}
    await AsyncStorage.setItem('@user:user_location', location_data);

    if (prev_location.source == source == 'location') {
        event_type = 'moving'
    } else if (prev_location.source == source == 'stationary') {
        event_type = 'stationary'
    } else if (prev_location.source !=  source == 'location') {
        event_type = 'started moving'
    } else if (prev_location.source !=  source == 'stationary') {
        event_type = 'stopped moving'
    } else {
    	event_type = user_event
    }


    NetworkInfo.getIPV4Address(async ipv4 => {
        const requestPayload = {
          cmd: 'softcash.utils.add_tracking',
          mobileNumber: userObject.phonenos,
          ip: ipv4,
          gps: `${location.latitude}, ${location.longitude}`,
          date: moment().format('DD/MM/YYYY'),
          time: moment().format('HH:mm:ss'),
          imei: IMEI.getImei(),
          event: user_event,
          event_type: event_type,
          location_data: location_data
        };
        console.log(requestPayload)
        const response = await sendToFrappe(requestPayload);
        // IMPORTANT: task has to be ended by endTask
        if (!(taskKey == null)) BackgroundGeolocation.endTask(taskKey);
    });
}

export const formatCurrency = (amt) => {
    return '₦ ' + Numeral(amt).format('0,0.00')
}


export const listenToSMS = (callback) => {

	let subscription = SmsListener.addListener(message => {
		let verificationCodeRegex = /Your authentication token is ([\d]{6,})/im
		console.log('message object')
		console.log(message)

		if (verificationCodeRegex.test(message.body)) {
			let verificationCode = message.body.match(verificationCodeRegex)[1]
			console.log('verification matched')
			console.log(verificationCode)
			callback(verificationCode);
		}
	})
	return subscription;
}


export function getPastDate(days,weeks, months){
    var today = new Date();
    var t_days = (parseInt(days) * 24 * 60 * 60 * 1000) || 0;
    var t_weeks = (parseInt(weeks) * 7 * 24 * 60 * 60 * 1000) || 0;
    var t_months = parseInt(months) || 0;
    var year = today.getFullYear();
	var n_date = new Date(Date.now() - t_days - t_weeks);
	var month = n_date.getMonth() + 1
    var day = n_date.getDate()
    while ((month - t_months) < 1){
		t_months = t_months - month;
		month = 12;
		year = year - 1;
	}
	var n_month = month - t_months;
    if (n_month.toString().length < 2) n_month = '0' + n_month;
    if (day.toString().length < 2) day = '0' + day;
    var s_date = [year, n_month, day].join('-');
	return new Date(s_date);
}


export const getCallLogs = ()=>{
    return new Promise((resolve)=>{
        CallLogs.show((logs)=>{
            resolve(logs)
        })
    })
}



export const appStateListener = {
	add: async function(event, handler) {
		AppState.addEventListener(event, handler);
	},
	remove: function(event, handler) {
		AppState.removeEventListener(event, handler);
	}
}



export const cardIcon = (cardBrand)=>{
	cardBrand = cardBrand.toLowerCase();

	if (cardBrand.indexOf('visa') != -1) {
		cardBrand = 'visa';
	} else if (cardBrand.indexOf('mastercard') != -1) {
		cardBrand = 'mastercard';
	} else if (cardBrand.indexOf('verve') != -1) {
		cardBrand = 'verve';
	}

    let icons = {
        visa: require('../img/visa-icon.png'),
        mastercard: require('../img/mastercard-icon.png'),
        verve: require('../img/verve-icon.png')
    }
    return (
        <Image
            source={icons[cardBrand]}
            style={{height:30, width:60, resizeMode:'contain'}}
        />
    )
}


export const cardsPicker = (cards, pickCard=false, onPress, onLongPress)=>{
    let retList = [];
    onPress = onPress ? onPress : ()=>{};
    onLongPress = onLongPress ? onLongPress : ()=>{};
    for(let i=0; i<cards.length; i++){
        let cardMask = '**** **** **** ' + cards[i].card_last4;
        let card_expiry = 'EXP: ' + cards[i].card_expiry;
        let card_brand = cards[i].card_brand.trim();
        let card_bank = cards[i].card_bank || 'NULL';
        let defaultCard = cards[i].default;
        if (defaultCard) {
        	defaultCard = (
	        	<View>
	        		<Icon name="ios-checkmark-circle-outline" type="ionicon" color="white" size={30}/>
	        	</View>
	        );
        } else {
        	defaultCard = null;
        }
        retList.push(
            <View key={10+i} style={{
                marginVertical:5,
                marginHorizontal:10,
            }}>
                <TouchableHighlight onPress={()=>onPress(i)} onLongPress={()=>onLongPress(i)} underlayColor="#e3e3e3">
                	<View>
                		<View style={{
			                backgroundColor:'#5816ae',
			                borderRadius:5,
			                paddingVertical: 10
                		}}>
			                <View style={{
			                    flexDirection:'row',
			                    justifyContent:'space-between',
			                    minHeight:1,
			                    paddingHorizontal:10,
			                    height:30
			                }}>
			                    <View style={{flex:0.73, marginRight:10, flexDirection:'row', justifyContent:'space-between'}}>
			                    	<Text style={{fontSize:18, color:'#fff', textAlignVertical:'center', fontWeight:'bold'}}>{card_brand.toUpperCase()}</Text>
	                				{defaultCard}
			                    </View>
			                    <View style={{flex:0.27, alignItems:'flex-end'}}>
			                    	{cardIcon(card_brand)}
			                    </View>
			                </View>
	                		<View style={{height:30, marginHorizontal:10}}>
	                			<Text style={{fontSize:18, color:'#fff', textAlignVertical:'center'}}>{card_bank.toUpperCase()}</Text>
	                		</View>
			                <View style={{
			                    flexDirection:'row',
			                    justifyContent:'space-between',
			                    minHeight:1,
			                    paddingHorizontal:10,
			                    height:30
			                }}>
				                <Text style={{fontSize:20, color:'#fff'}}>{cardMask}</Text>
			                	<Text style={{fontSize:16, textAlignVertical:'center', color:'#fff'}}>{card_expiry}</Text>
			                </View>
		                </View>
		            </View>
                </TouchableHighlight>
            </View>
        )
    }
    return retList;
}


export const showOverlay = (show, closeStatus=true, closeFn)=>(
    <View>
        <View style={{
            flex: 1,
            position: 'absolute',
            left: 0,
            top: 0,
            opacity: 0.5,
            backgroundColor: 'black',
            width: SCREEN_WIDTH,
            height:SCREEN_HEIGHT - HEADER_HEIGHT,
            zIndex:9
        }}/>
        <View style={{
            position: 'absolute',
            left: SCREEN_WIDTH * 0.05,
            top: SCREEN_HEIGHT * 0.1,
            height:SCREEN_HEIGHT * 0.65,
            width:SCREEN_WIDTH * 0.9,
            backgroundColor:'#fff',
            borderRadius:5,
            zIndex:10,
            alignItems: 'center'
        }}>
            <ScrollView>
                {show}
            </ScrollView>
            {
                closeStatus &&
                <TouchableHighlight onPress={closeFn} style={{margin:10, padding:5}}>
                    <Text style={{textAlign: 'center', fontSize:20}}>Close</Text>
                </TouchableHighlight>
            }
        </View>
    </View>
);


export const freeze = (freezeMsg)=>(
    <View style={{
        flex: 1,
        position: 'absolute',
        left: 0,
        top: 0,
        opacity: 0.5,
        backgroundColor: 'black',
        width: SCREEN_WIDTH,
        height:SCREEN_HEIGHT - HEADER_HEIGHT,
        zIndex:9
    }}>
        <Text style={{
            marginVertical: SCREEN_HEIGHT * 0.65 * 0.5,
            marginHorizontal: SCREEN_WIDTH * 0.125,
            fontSize: 27,
            fontWeight: '100',
            color:'#f0f0f0',
            textAlign:'center'
        }}>{freezeMsg}</Text>
    </View>
);




export const MyModal = ({ view, onComplete, modalVisible}) => {
	return (
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            alert('Modal has been closed.');
          }}>
          <View style={{marginVertical:0.2*SCREEN_HEIGHT, marginHorizontal:'17%', height:'52%', borderWidth:3, borderColor:'green', backgroundColor:'white', borderRadius:10}}>
          	{view}
          </View>
        </Modal>
	)
}

export const RenderPeriods = (data, extended) => {
	var data_lst = [];
	for (var i=0; i<data.length; i++){
		data_lst.push(
			<View style={{marginBottom:10, paddingBottom:5, marginHorizontal:10, backgroundColor:'#f3f3f3'}} key={i}>
				<View style={{
					flexDirection:'row',
					justifyContent:'space-between',
					borderBottomWidth:1,
					borderBottomColor:'brown'
				}}>
					<Icon name="event" size={20}/>
					<Text style={{fontSize:17, fontWeight:'500', color:'#000'}}>{formatDate(data[i].due_date)}</Text>
				</View>
				{
					extended &&
					<View style={{flexDirection:'row', justifyContent:'space-between'}}>
						<Text style={{fontSize:17}}>Principal Paid:</Text>
						<Text style={{fontSize:17}}>{'₦ ' + Numeral(data[i].principal_paid).format('0,0.00')}</Text>
					</View>
				}
				<View style={{flexDirection:'row', justifyContent:'space-between'}}>
					<Text style={{fontSize:17}}>Principal Due:</Text>
					<Text style={{fontSize:17}}>{'₦ ' + Numeral(data[i].principal_due).format('0,0.00')}</Text>
				</View>
				{
					extended &&
					<View style={{flexDirection:'row', justifyContent:'space-between'}}>
						<Text style={{fontSize:17}}>Interest Paid:</Text>
						<Text style={{fontSize:17}}>{'₦ ' + Numeral(data[i].interest_paid).format('0,0.00')}</Text>
					</View>
				}
				<View style={{flexDirection:'row', justifyContent:'space-between'}}>
					<Text style={{fontSize:17}}>Interest Due:</Text>
					<Text style={{fontSize:17}}>{'₦ ' + Numeral(data[i].interest_due).format('0,0.00')}</Text>
				</View>
				<View style={{flexDirection:'row', justifyContent:'space-between'}}>
					<Text style={{fontSize:17, color:'#0f0f0f'}}>Total:</Text>
					<Text style={{fontSize:17, color:'#0f0f0f'}}>{'₦ ' + Numeral(data[i].total_due).format('0,0.00')}</Text>
				</View>
			</View>
		);
	};
	return data_lst;
};