import * as React from 'react';
import { useState, useRef } from 'react';
import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, ActivityIndicator, Alert } from 'react-native'
import { Button, Icon, Divider, Input } from 'react-native-elements'
import { Actionsheet } from 'native-base';
import { dateFormater } from '../utils/date';
import { closeModal } from '../redux/actions/AlertActions';
import { useDispatch } from 'react-redux';
import DateTimePicker from '@react-native-community/datetimepicker';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import DatePicker from "react-native-date-picker";
import MonthPicker from 'react-native-month-year-picker';
import moment from 'moment';
import Theme from './theme.style.js';
import Assets from './assets.manager.js';
import CustomIcon from './icons.js';
var styles = StyleSheet.create({
column: {
flexDirection: 'column',
alignItems: 'flex-start',
width: '100%',
padding: 15
},
row: {
flexDirection: 'row',
alignItems: 'flex-start',
flexWrap: 'wrap',
flex: 1,
padding: 5,
fontSize: 16,
},
bullet: {
width: 10
},
bulletText: {
flex: 1,
color: 'rgba(0, 0, 0, 0.7)'
},
boldText: {
fontWeight: 'bold'
},
normalText: {
color: 'rgba(0, 0, 0, 0.7)'
},
container: {
flex: 1,
backgroundColor: 'blue',
flexDirection: 'row',
flexWrap: 'wrap'
},
item: {
backgroundColor: 'orange',
width: Theme.screen.w / 2,
height: Theme.screen.h / 2,
margin: 5
},
image: {
width: Theme.screen.w / 2,
height: Theme.screen.h / 2
},
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: '#00000090',
padding: 30
},
bottomView: {
flex: 1,
justifyContent: "flex-end",
alignItems: "center",
backgroundColor: '#00000090',
padding: 0
},
modalView: {
backgroundColor: '#fff',
padding: 20
},
modalTitle: {
padding: 5,
fontSize: 18,
fontWeight: 'bold'
},
modalText: {
padding: 5,
fontSize: 16,
color: 'gray',
marginTop: 10
},
});
const ModalDialogContainer = (props) => {
const Content = props.content;
return (
)
}
const ul = function (props) {
const [drop, setdrop] = useState(false);
const renderlist = (dataset) => {
return dataset.map((data, index) => {
return (
{'\u2022' + " "}
{data.label}
)
})
}
return (
{ setdrop(!drop) }}>
{props.title}
{drop ? {renderlist(props.list || [])} : null}
)
}
const product = function (props) {
return (
{props.title}
)
}
const loyaltycard = function (props) {
return (
{props.title}
)
}
const card = function (props) {
let h = props.height ? props.height : 130
return (
{props.title}
)
}
const button = function (props) {
return ()
}
const input = function (props) {
return ()
}
const icon = function (props) {
return ()
}
const transaction = function (Props) {
const props = Props.data
const getTransactionRedeemedPoints = (points, items) => {
if (!items) return 0 + points;
let res = 0
for (var x = 0; x < items.length; x++) { if (items[x].item == 'EPURSE' || items[x].item == '' && items[x].quantity > 0) res += items[x].quantity }
return res + points
}
return (
{dateFormater(props.date)}
{props.station || 'APP'}
{
props.station !== "APP" &&
= 1 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
= 2 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
= 3 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
= 4 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
= 5 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
}
{"\u20B1"} {Theme.formatter.CRNCY(props.total_amount) || "0.00"}
Earned: {Theme.formatter.CRNCY(props.earned) || "0.00"} PTS
Redeemed: {Theme.formatter.CRNCY(getTransactionRedeemedPoints(props.redeemed, props.items))} PTS
{!Props.disabled &&
}
)
}
const transactiontable = function (Props) {
const transaction = Props.data;
const items = Props.data.items || [];
const getTransactionRedeemedPoints = (points, items) => {
let res = 0
for (var x = 0; x < items.length; x++) { if (items[x].item == 'EPURSE' || items[x].item == '' && items[x].quantity > 0) res += items[x].quantity }
return res + points
}
const getDiscount = () => {
const discounted = items.filter(item => item.price.toString().includes("-"));
const discount = discounted.reduce((prev, current) => prev + parseFloat(current.price.toString().slice(1)), 0);
return discounted.length > 0 ? discount : 0
}
const renderItem = () => {
return items.filter(item => !item.price.toString().includes("-")).map((item, index) => {
if (item.item == 'EPURSE' || item.item == '') return null
return (
{item.item}
{item.price.toString().includes("-") ? "" : Theme.formatter.CRNCY(item.quantity.toFixed(2))}
{`\u20B1 ${Theme.formatter.CRNCY(item.price)}`}
)
})
}
const showDiscount = Props.showDiscount && getDiscount() !== 0;
return (
{/* TABLE HEADER */}
Products
Qty
Price
{/* TABLE HEADER */}
{/* TABLE CONTENT */}
{renderItem()}
{/* TABLE CONTENT */}
Total
{"\u20B1"} {Theme.formatter.CRNCY(transaction.total_amount)}
Earned
{Theme.formatter.CRNCY(transaction.earned)} PTS
Redeemed
{Theme.formatter.CRNCY(getTransactionRedeemedPoints(transaction.redeemed, items))} PTS
{showDiscount &&
Discount
{`- \u20B1 ${Theme.formatter.CRNCY(getDiscount())}`}
}
)
}
const custominput = function (props) {
let customstyle = props.style || {}
let customtitlestyle = props.titlestyle || {}
let fontsize = props.fontsize || 15
let inactiveborderwidth = props.inactiveborderwidth || 0.75
let activeborderwidth = props.activeborderwidth || 1.5
const input = () => {
return (
{props.title}
{props.bottomText ? {props.bottomText} : null}
{props.bottomOption ?
If you wish to change this, please contact
Unioil Customer Service
: null}
{props.hasError ? {props.errorMessage} : null}
)
}
const select = () => {
return (
{props.title}
{props.value || ""}
{props.bottomText ? {props.bottomText} : null}
{props.bottomOption ?
If you wish to change this, please contact
Unioil Customer Service
: null}
{props.hasError ? {props.errorMessage} : null}
)
}
return props.type == "input" ? input() : select();
}
const checkboxdialog = function (props) {
if (!props.shown) return null;
let itemsCount = props.items.length;
let size;
if (itemsCount == 2) size = 1.1;
else if (itemsCount == 4) size = 2.2;
const renderItems = () => {
return props.items.map((item, index) => {
if (item.string == "") return null
let color = props.selected == item.value ? Theme.colors.accent : Theme.colors.darkGray;
let bullet = props.selected == item.value ? "radiobox-marked" : "radiobox-blank";
return (
props.onSelect(item.value, item.string)} style={{ flexDirection: 'row', alignItems: 'flex-start', padding: 5, marginTop: 10 }}>
{item.string}
)
})
}
return (
{props.title}
{props.items ? renderItems() : null}
)
}
const shadowView = function (props) {
const {
elevation,
shadowRadius,
shadowOpacity,
shadowOffset,
shadowColor,
} = props;
const newShadowColor = shadowColor || '#000';
const newShadowOffset = shadowOffset || { width: 0, height: 1 };
const newShadowOpacity = shadowOpacity || 0.5;
const newShadowRadius = shadowRadius || 3;
const newElevation = elevation || 5;
return (
{props.children}
)
}
const inputdialog = function (props) {
const _textInput = useRef(null);
if (!props.shown) return null;
let value = "";
const titlecolor = props.current == props.index && props.focus ? Theme.colors.accent : Theme.colors.darkGray
const bordercolor = props.error ? Theme.colors.primary : (props.focus && props.current == props.index ? Theme.colors.accent : 'gray')
const borderwidth = props.error ? 1.6 : (props.focus && props.current == props.index ? 1.5 : 1)
const style = {
container: { flexDirection: 'row', width: '100%', marginTop: props.top || 1, alignItems: 'center' },
title: { fontSize: 12, color: titlecolor, marginTop: -25, marginBottom: 15 },
input: { width: '100%', fontSize: 16, padding: 0, borderBottomColor: bordercolor, borderBottomWidth: borderwidth, color: props.isDarkMode ? props.textColor : Theme.colors.black },
error: { fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 5 }
}
return (
{props.title}
{props.isCustom != undefined && props.isCustom ? (
{props.error ? {props.title} : null}
value = val}
style={style.input}
/>
{props.error ? {props.errorMessage} : null}
) : (
value = val}
placeholderTextColor={Theme.colors.darkGray}
placeholder={props.placeholder || ""}
style={{ padding: 0, paddingTop: 15, paddingBottom: 0, fontSize: 18, borderColor: 'gray', borderBottomWidth: 1, color: props.textColor }}
/>
)}
CANCEL
props.onSubmit(value)} style={{ padding: 10, marginLeft: 5 }}>
ADD
)
}
const confirmdialog = function (props) {
if (!props.shown) return null;
let value = "";
return (
{props.title}
{props.message}
CANCEL
props.onSubmit(value)} style={{ padding: 10, marginLeft: 5 }}>
{props.buttonConfirmText || "CONFIRM"}
)
}
const infodialog = function (props) {
if (!props.shown) return null;
let value = "";
return (
{props.title}
{props.message}
props.onSubmit(value)} style={{ padding: 10, marginLeft: 0 }}>
{props.buttonConfirmText || "OK"}
)
}
const datepicker = function (props) {
if (!props.shown) return null;
if (Platform.OS == 'ios') {
return
}
return (
props.onChange(selectedDate ? moment(selectedDate).format(props.returnFormat) : props.value != null ? props.value : null)}
/>
)
}
const datepickerIOS = function (props) {
return (
props.onChange(selectedDate ? moment(selectedDate).format(props.returnFormat) : props.value != null ? props.value : null)}
/>
)
}
const nointernet = function (props) {
return (
{props.message}
{props.buttonText}
)
}
const infomodaldialog = function (props) {
return (
{props.title}
{props.message}
OK
)
}
const popup = function (props) {
return props.visible ?
{props.message}
: null
}
const loader = function (props) {
return (
{props.title || "Connecting"}
{props.message || "Please wait, connecting to server..."}
)
}
const loaderView = function (props) {
return (
{props.title || "Validating"}
{props.message || "Please wait..."}
)
}
const logoutdialog = function (props) {
return (
{props.title}
{props.message}
CANCEL
OK
)
}
const nointernet2 = (props, buttons) => {
Alert.alert("Information", "\nSlow or no internet connection. Please check your internet connection.", buttons)
}
const customAlert = function (props) {
const dispatch = useDispatch();
const {
open,
yesCB,
noCB,
title,
body,
yesText,
noText,
yesButtonOnly,
noButtonOnly,
theme,
children,
backdropCancellable
} = props;
if (!open) return null;
const onPressNo = () => {
noCB?.();
dispatch(closeModal());
}
const onPressYes = () => {
yesCB?.();
dispatch(closeModal());
}
return (
{ } : onPressNo}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,.5)',
paddingHorizontal: 25
}}>
{/* Image in the top half */}
{/* Text in the bottom half */}
{
children ?
children :
<>
{title}
{body}
{!yesButtonOnly &&
{noText ? noText : "Cancel"}
}
{!noButtonOnly &&
{yesText ? yesText : "Yes"}
}
}
)
}
const bottomselectmodal = function (props) {
let color = Theme.colors.textPrimary
let items = props.items || []
const renderContent = () => {
return items.map((data, index) => {
return (
{data.icon ?
: null}
{data.label}
)
})
}
return (
{renderContent()}
)
}
const promoGPS = function (props) {
return (
{props.title}
DISMISS
SEE DETAILS
)
}
const notification = function (props) {
return (
{props.title}
{props.message}
CLOSE
)
}
const CustomDatePicker = (props) => {
const nowDate = new Date();
const newYear = nowDate.getFullYear() - 20;
const [currentDate, setCurrentDate] = useState(props.date || new Date(newYear, 0, 1));
let version = parseInt(Platform.Version, 10)
if (version >= 13) {
return (
{ props.onCancel() }} style={styles.centeredView}>
{ setCurrentDate(date) }}
fadeToColor={Theme.colors.lightGray}
textColor={props?.isDarkMode ? props?.textColor : Theme.colors.black}
/>
{ props.onCancel() }}>
CANCEL
{ props.onConfirm(currentDate) }}>
OK
)
} else {
var pickerRef = useRef()
return pickerRef = r}
isVisible={props.visible}
mode="date"
headerTextIOS="Select Date"
date={props.date || new Date(1990, 1, 1)}
maximumDate={new Date()}
confirmTextIOS="Ok"
onConfirm={props.onConfirm}
onCancel={props.onCancel}
modalStyleIOS={{ justifyContent: 'center' }}
pickerContainerStyleIOS={{ borderRadius: 0 }}
customHeaderIOS={() => null}
customConfirmButtonIOS={() => {
return (
props.onCancel()} style={{ padding: 10, marginRight: 5 }}>
CANCEL
{
props.onConfirm(pickerRef.state.currentDate)
}} style={{ padding: 10, marginLeft: 5 }}>
OK
)
}}
customCancelButtonIOS={() => null}
/>
}
}
const CustomMonthPicker = (props) => {
if (!props.visible) return null
return
}
const ActionOption = (props) => {
return (
{props.buttons.map(item => (
{item.name}
))}
)
}
export default {
product,
card,
button,
input,
ul,
loyaltycard,
icon,
transaction,
transactiontable,
custominput,
checkboxdialog,
inputdialog,
confirmdialog,
infodialog,
datepicker,
datepickerIOS,
nointernet,
infomodaldialog,
popup,
loader,
logoutdialog,
nointernet2,
bottomselectmodal,
promoGPS,
notification,
CustomDatePicker,
CustomMonthPicker,
ActionOption,
ModalDialogContainer,
loaderView,
customAlert,
shadowView,
}