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 (
    <View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
      <View style={{flex: 1, flexDirection: 'row'}}>
        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1,backgroundColor: '#00000060'}}></TouchableOpacity>
        <View style={{flex: 10, backgroundColor: '#fff'}}>
          <Content props />
        </View>
        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
      </View>
      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
    </View>)
}

const ul = function(props){

  const [drop, setdrop] = useState(false);

  const renderlist = (dataset) => {
    return dataset.map((data, index) => {
      return (
      <View key={index} style={ styles.row }>
        <View style={ styles.bullet }>
          <Text>{'\u2022' + " "}</Text>
        </View>
        <View style={ styles.bulletText }>
          <Text>
            <Text style={ styles.normalText }>{data.label}</Text>
          </Text>
        </View>
      </View>)
    })
  }

  return (
  <View style={{backgroundColor: 'red'}}>
    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
      <TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => {setdrop(!drop)}}>
        <Text style={{flex:3, marginTop: 15, fontWeight: 'bold'}}>{props.title}</Text>
        <View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
          <Icon name={drop ? "expand-more" : "chevron-right"} color="gray" />
        </View>
      </TouchableOpacity>
    </View>
    {drop ? <View style={ styles.column }>{renderlist(props.list || [])}</View> : null}
  </View>)
}

const product = function(props){
  return (
    <TouchableOpacity onPress={props.onPress || null} style={{flexBasis: '45%', width: '45%', padding: 5, margin: '2.5%', borderRadius: 15, borderWidth: 0.08}}>
      <View style={{borderRadius: 15, height: props.height || 120, justifyContent: 'center', alignItems: 'center'}}>
        <Image source={props.image || {uri: null}} style={{width: '90%', height: '90%', borderRadius: 15, resizeMode: 'contain'}} />
      </View>
      <Text style={{padding: 10, fontSize: 16, color: Theme.colors.textPrimary}}>{props.title}</Text>
    </TouchableOpacity>
  )
}

const loyaltycard = function(props){
  return (
    <TouchableOpacity onPress={props.onPress || null} style={{flexBasis: '45%', width: '45%', margin: '2.5%', borderRadius: 15, borderWidth: 0.08}}>
      <View style={{height: props.height || 120, justifyContent: 'center', alignItems: 'center'}}>
        <Image source={props.image} style={{width: '100%', height: '100%', borderTopLeftRadius: 15,borderTopRightRadius: 15, borderBottomLeftRadius: 15, borderBottomRightRadius: 15,  resizeMode: 'stretch'}} />
      </View>
      <Text style={{padding: 10, color: Theme.colors.darkGray, fontSize: 16, textAlign: 'center'}}>{props.title}</Text>
    </TouchableOpacity>
  )
}

const card = function(props){
  let h = props.height ? props.height : 130
  return (
    <TouchableOpacity onPress={props.onPress} activeOpacity={ props.disabled || 0} style={{flex: 1, height: h, margin: 5, borderRadius: 15, elevation: 0, borderTopLeftRadius: 15, borderTopRightRadius: 15, overflow: 'hidden'}}>
      <View style={{flex: 1}}>
        <Image 
          source={props.image} 
          style={
            {
              width: '100%',
              borderTopLeftRadius: 15,
              borderTopRightRadius: 15,
              height: '100%',
            }} 
        />
      </View>
      <Text numberOfLines={1} adjustsFontSizeToFit={true} style={{backgroundColor: '#fff', padding: 5, marginBottom: 0, borderBottomLeftRadius: 15, borderBottomRightRadius: 15, fontSize: 15, color: 'gray', textAlign: props.titlealign || 'center', elevation: 0}}>{props.title}</Text>
    </TouchableOpacity>)
}

const button = function(props){
  return (<Button title={props.title} type={props.type}/>)
}

const input = function(props){
  return (<Input
    leftIcon={props.leftIcon || {}}
    placeholder={props.placeholder}
    errorStyle={props.errorStyle || {}}
    errorMessage={props.errorMessage}
  />)
}

const icon = function(props){
  return (<Image source={Assets.icons[props.name]} style={{width: props.size || 20, height: props.size || 20, resizeMode: props.resizeMode || 'cover', marginBottom: props.marginBottom || 0}} />)
}

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 (
    <View style={{flex: 0, width: '95%', marginLeft: '2.5%', marginTop: 15, paddingVertical: 6, paddingHorizontal: 10 , backgroundColor: props.station == 'HO' ? Theme.colors.lightGray : Props.isDarkMode ? Props.cardBackgroundColor : Theme.colors.lightGray, borderWidth: 0.1, borderRadius: 14, borderColor: 'transparent', elevation: 5 }}>
      <Text style={{fontFamily: 'Arial', paddingBottom: 10, color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>{dateFormater(props.date)}</Text>
      <TouchableOpacity activeOpacity={1} onPress={props.station == 'HO' ? null : Props.onPress} style={{flex: 1, flexDirection: 'row', marginTop: 0}}>
          <View style={{flex: 3, paddingTop: 5, paddingBottom: 5}}>
            <View style={{flex: 1, flexDirection: 'column'}}>
              <Text style={{fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>{props.station || 'APP'}</Text>
              {
                props.station !== "APP" &&
                  <View style={{flex: 4, flexDirection: 'row'}}>
                    <CustomIcon.AntDesign name={props.rating >= 1 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
                    <CustomIcon.AntDesign name={props.rating >= 2 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
                    <CustomIcon.AntDesign name={props.rating >= 3 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
                    <CustomIcon.AntDesign name={props.rating >= 4 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
                    <CustomIcon.AntDesign name={props.rating >= 5 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
                  </View>
              }
            </View>
          </View>
          <View style={{flex: 5, paddingTop: 5, paddingLeft: 5, paddingBottom: 5}}>
            <View style={{flex: 1, flexDirection: 'column'}}>
              <Text style={{fontFamily: 'Arial', fontWeight: 'bold', color: Props.isDarkMode ? Props.textColor : Theme.colors.black}}>{"\u20B1"} {Theme.formatter.CRNCY(props.total_amount) || "0.00"}</Text>
              <Text style={{fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>Earned: {Theme.formatter.CRNCY(props.earned) || "0.00"} PTS</Text>
              <Text style={{fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>Redeemed: {Theme.formatter.CRNCY(getTransactionRedeemedPoints(props.redeemed, props.items))} PTS</Text>
            </View>
          </View>
        { !Props.disabled && <View style={{flex: 1, paddingTop: 5, paddingBottom: 5}}>
          <CustomIcon.Feather name="chevron-right" size={40} color={props.station == 'HO' ? 'gray' : Theme.colors.primary} />
        </View>}
      </TouchableOpacity>
    </View>
    )
}

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 (
        <View key={index} style={{flex: 1, flexDirection: 'row', paddingTop: 10, alignItems: 'center'}}>
          <Text style={{flex: 4, fontFamily: 'Arial', textAlign: 'center', fontSize: 13, color: Props.textColor}}>{item.item}</Text>
          <Text style={{flex: 2, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: Props.textColor}}>{item.price.toString().includes("-") ? "" : Theme.formatter.CRNCY(item.quantity.toFixed(2))}</Text>
          <Text style={{flex: 2, fontFamily: 'Arial', fontWeight: 'bold',textAlign: 'center', fontSize: 13, color: Props.textColor}}>{`\u20B1 ${Theme.formatter.CRNCY(item.price)}`}</Text>
        </View>)
    })
  }

  const showDiscount = Props.showDiscount && getDiscount() !== 0;

  return (<View style={{width: '100%'}}>
          {/* TABLE HEADER */}
          <Divider />
            <View style={{flex: 1, flexDirection: 'row', paddingVertical: 20, alignItems: 'center'}}>
              <Text style={{flex: 4, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, textAlign: 'center'}}>Products</Text>
              <Text style={{flex: 2, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, textAlign: 'center'}}>Qty</Text>
              <Text style={{flex: 2, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, textAlign: 'center'}}>Price</Text>
            </View>
          <Divider />
          {/* TABLE HEADER */}

          {/* TABLE CONTENT */}
          <ScrollView style={{ width: '100%', height: 170}}>
            {renderItem()}
            <View style={{padding: 10}}></View>
          </ScrollView>
          {/* TABLE CONTENT */}
          
          <Divider />
            <View style={{flex: 1, flexDirection: 'row', padding: 15, marginTop: 10, alignItems: 'center'}}>
              <Text style={{flex: 4, height: 30, fontFamily: 'Arial', fontWeight: 'bold', fontSize: 20, textAlign: 'left', color: Theme.colors.darkGray}}>Total</Text>
              <Text style={{flex: 2, height: 30, fontFamily: 'Arial', fontWeight: 'bold', fontSize: 20, textAlign: 'right', color: Props.textColor}}>{"\u20B1"} {Theme.formatter.CRNCY(transaction.total_amount)}</Text>
            </View>
            <View style={{flex: 1, flexDirection: 'row', padding: 15, alignItems: 'center'}}>
              <Text style={{flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray}}>Earned</Text>
              <Text style={{flex: 2,height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000"}}>{Theme.formatter.CRNCY(transaction.earned)} PTS</Text>
            </View>
            <View style={{flex: 1, flexDirection: 'row', paddingHorizontal: 15, paddingVertical: 5, paddingBottom: showDiscount ? 5 : 20, alignItems: 'center'}}>
              <Text style={{flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray}}>Redeemed</Text>
              <Text style={{flex: 2, height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000"}}>{Theme.formatter.CRNCY(getTransactionRedeemedPoints(transaction.redeemed, items))} PTS</Text>
            </View>
            {showDiscount && 
                <View style={{flex: 1, flexDirection: 'row', paddingHorizontal: 15, paddingVertical: 15, marginBottom: 5, alignItems: 'center'}}>
                  <Text style={{flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray}}>Discount</Text>
                  <Text style={{flex: 2, height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000"}}>{`- \u20B1 ${Theme.formatter.CRNCY(getDiscount())}`}</Text>
                </View>
            }
          <Divider />
        </View>)
}

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 (
      <View style={{flex: 1, marginBottom: 15, ...customstyle}}>
        <Text style={{padding: 5, paddingLeft: 15, fontSize: 12, color: props.focused ? Theme.colors.accent : Theme.colors.darkGray, ...customtitlestyle}}>{props.title}</Text>
        <Input
          focused={props.focused|| false}
          disabled={props.disabled || false}
          keyboardType={props.keyboardType || 'default'}
          maxLength={props.maxLength || undefined}
          value={props.value || null}
          placeholder={props.placeholder}
          placeholderTextColor={props.placeholderColor}
          onChangeText={props.onChangeText}
          onFocus={props.onFocus}
          containerStyle={{padding: 0}}
          inputContainerStyle={{padding: 0, borderBottomWidth: props.focused ? 1.5 : 0.75, borderColor: props.hasError ? Theme.colors.primary : props.focused ? Theme.colors.accent : props.disabled ? "lightgray" : "black" }}
          inputStyle={{padding: 5, fontFamily: 'Arial', fontSize: 14, borderWidth: 0, color: props?.isDarkMode ? props.textColor : Theme.colors.black}}
        />
        {props.bottomText ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>{props.bottomText}</Text></View> : null}
        {props.bottomOption ? 
          <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>If you wish to change this, please contact</Text>
          <TouchableOpacity onPress={props.onContact || null}>
            <Text style={{paddingLeft: 15, fontSize: 15, color: Theme.colors.accent}}>Unioil Customer Service</Text>
          </TouchableOpacity></View> : null }
          {props.hasError ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.primary}}>{props.errorMessage}</Text></View> : null}
      </View>
    )
  }
  const select = () => {
    return (
    <View style={{flex: 1, marginBottom: 15, ...customstyle}}>
      <Text style={{padding: 5, paddingLeft: 15, fontSize: fontsize, color: props.focused ? Theme.colors.accent : Theme.colors.darkGray,...customtitlestyle}}>{props.title}</Text>
      <TouchableOpacity onPress={props.onPress} style={{padding: 10, ...customstyle}}>
        <View style={{padding: 0, borderBottomWidth: props.focused ? activeborderwidth : inactiveborderwidth, borderColor: props.hasError ? Theme.colors.primary : props.focused ? Theme.colors.accent : props.disabled ? "lightgray" : "black" }}>
          <Text style={{fontSize: 14, fontFamily: 'Arial', paddingLeft: 5, paddingBottom: 10, color: props?.isDarkMode ? props.textColor : Theme.colors.black}}>{props.value || ""}</Text>
        </View>
      </TouchableOpacity>
      {props.bottomText ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>{props.bottomText}</Text></View> : null}
      {props.bottomOption ? 
        <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>If you wish to change this, please contact</Text>
        <TouchableOpacity onPress={props.onContact || null}>
          <Text style={{paddingLeft: 15, fontSize: 14, color: Theme.colors.accent}}>Unioil Customer Service</Text>
        </TouchableOpacity></View> : null }
        {props.hasError ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.primary}}>{props.errorMessage}</Text></View> : null}
    </View>)
  }
  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 (
      <TouchableOpacity key={index} onPress={() => props.onSelect(item.value, item.string)} style={{flexDirection: 'row', alignItems: 'flex-start', padding:5, marginTop: 10}}>
        <View style={{flex: 1}}>
          <Text style={{textAlign: 'center', padding: 2.5}}>
            <CustomIcon.MaterialCommunityIcons color={color} name={bullet} size={25} />
          </Text>
        </View>
        <View style={{flex: 5}}><Text style={{padding: 5, color: Theme.colors.darkGray, fontSize: 16}}>{item.string}</Text></View>
      </TouchableOpacity>)
    })
  }

  return (
    <View style={{flex: 1, width: '100%', height: '100%', top: Platform.OS == 'ios' ?  45 : 0, position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 35, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
      <View style={{flex: size, flexDirection: 'row'}}>
        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
        <View style={{flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff'}}>
          <View style={{width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 20}}>
            <View style={{padding: 10}}>
              <Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 18, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray}}>{props.title}</Text>
            </View>
            <View style={{marginTop: 5}}>
              {props.items ? renderItems() : null}
            </View>
          </View>
        </View>
        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
      </View>
      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 35, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
    </View>
  )
}

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 (
    <View style={{
      shadowColor: newShadowColor,
      shadowOffset: newShadowOffset,
      shadowOpacity: newShadowOpacity,
      shadowRadius: newShadowRadius, 
      elevation: newElevation,
      ...props.style,
    }}>
      {props.children}
    </View>
  )
}

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 (
    <View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
      <View style={{flex: 1, flexDirection: 'row'}}>
        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
        <View style={{flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff'}}>
          <View style={{flex: 1, width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 15}}>
            <View style={{padding: 10}}>
              <Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray}}>{props.title}</Text>
            </View>
            <View style={{flex: 0.5, marginTop: 5, padding: 10}}>
              {props.isCustom != undefined && props.isCustom ? (
                <View style={style.container}> 
                  <View style={{flex: 1}}>
                    {props.error ? <Text style={{fontSize: 12, color: Theme.colors.primary, marginBottom: 10}}>{props.title}</Text> : null }
                    <TextInput
                      ref={_textInput}
                      keyboardType={props.keyboardType || null}
                      maxLength={props.maxlength || null} 
                      placeholder={props.error ? null : props.placeholder || props.title || null}
                      placeholderTextColor={props.isDarkMode ? Theme.colors.darkGray : Theme.colors.gray}
                      value={props.value || null}
                      onFocus={props.onFocus || null}
                      onChangeText={(val) => value = val}
                      style={style.input} 
                    />
                    {props.error ? <Text style={style.error}>{props.errorMessage}</Text> : null }
                  </View>
                </View>
              ) : (
                <TextInput 
                  onChangeText={(val) => 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}}
                />
              )}
            </View>
            <View style={{ flex: 0.5, marginTop: 12, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
              <TouchableOpacity onPress={props.onCancel} style={{padding: 10, marginRight: 5}}>
                <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>CANCEL</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => props.onSubmit(value) } style={{padding: 10, marginLeft: 5}}>
                <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>ADD</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
      </View>
      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
    </View>
  )
}

const confirmdialog = function(props){
  if(!props.shown) return null;
  let value = "";
  return (
    <View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
      <View style={{flex: 1, flexDirection: 'row'}}>
        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
        <View style={{flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff'}}>
          <View style={{flex: 1, width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 15}}>
            <View style={{padding: 10}}>
              <Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray}}>{props.title}</Text>
            </View>
            <View style={{flex: 0.5, marginTop: 5, padding: 10}}>
              <Text style={{fontFamily: 'Arial', fontSize: 16, width: '90%', color: props.isDarkMode ? props.textColor : Theme.colors.darkGray}}>{props.message}</Text>
            </View>
            <View style={{flex: 0.5, marginTop: 12, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
              <TouchableOpacity onPress={props.onCancel} style={{padding: 10, marginRight: 5}}>
                <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>CANCEL</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => props.onSubmit(value) } style={{padding: 10, marginLeft: 5}}>
                <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>{props.buttonConfirmText || "CONFIRM"}</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
      </View>
      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
    </View>
  )
}

const infodialog = function(props){
  if(!props.shown) return null;
  let value = "";
  return (
    <View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 15, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
      <View style={{flex: 1, flexDirection: 'row'}}>
        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
        <View style={{flex: 12, backgroundColor: '#fff'}}>

          <View style={{width: '100%', backgroundColor: '#fff', padding: 15}}>
            <View style={{padding: 10}}>
              <Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: Theme.colors.darkerGray}}>{props.title}</Text>
            </View>
            <View style={{marginTop: 5, width: '100%', padding: 5}}>
              <Text style={{fontFamily: 'Arial', fontSize: 17, padding: 5, color: Theme.colors.darkGray}}>{props.message}</Text>
            </View>
            <View style={{ marginTop: 15, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
              <TouchableOpacity onPress={() => props.onSubmit(value) } style={{padding: 10, marginLeft: 0}}>
                <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>{props.buttonConfirmText || "OK"}</Text>
              </TouchableOpacity>
            </View>
          </View>

        </View>
        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
      </View>
      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 15, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
    </View>
  )
}

const datepicker = function(props){
  if(!props.shown) return null;

  if(Platform.OS == 'ios'){
    return <datepickerIOS props />
  }

  return (
    <DateTimePicker
      testID={props.id}
      timeZoneOffsetInMinutes={0}
      value={props.value != null ? new Date(props.value) : null || new Date("Jan 01 1990")}
      mode={"date"}
      is24Hour={true}
      display="spinner"
      style={{width:'100%'}}
      onChange={(event, selectedDate) => props.onChange(selectedDate ? moment(selectedDate).format(props.returnFormat) : props.value != null ? props.value : null)}
    />
  )
}

const datepickerIOS = function(props){
  return (
    <Modal
      animationType="none"
      transparent={true}
      visible={props.shown}
    >
      <TouchableOpacity style={styles.centeredView}>
        <TouchableOpacity activeOpacity={1} style={{...styles.modalView, width: '100%', ...props.style || {}}}>
        <DateTimePicker
          testID={props.id}
          timeZoneOffsetInMinutes={0}
          value={props.value != null ? new Date(props.value) : null || new Date("Jan 01 1990")}
          mode={"date"}
          is24Hour={true}
          display="spinner"
          style={{flex: 1}}
          onChange={(event, selectedDate) => props.onChange(selectedDate ? moment(selectedDate).format(props.returnFormat) : props.value != null ? props.value : null)}
        />
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  )
}

const nointernet = function(props){
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', top: Platform.OS == 'ios' ? 50 : 0}}>
      <Text style={{padding: 10, fontSize: 16, textAlign: 'center', bottom: Platform.OS == 'ios' ? 50 : 0}}>{props.message}</Text>
      <TouchableOpacity onPress={props.onPress} style={{backgroundColor: Theme.colors.primary, borderRadius: 10, padding: 14.5, paddingHorizontal: 35, bottom: Platform.OS == 'ios' ? 50 : 0}}>
        <Text style={{color: "#fff", fontSize: 16}}>{props.buttonText}</Text>
      </TouchableOpacity>
    </View>)
}

const infomodaldialog = function(props){
  return (
    <Modal
      animationType="none"
      transparent={true}
      visible={props.visible}
    >
      <TouchableOpacity onPress={props.onClose} style={styles.centeredView}>
        <TouchableOpacity activeOpacity={1} style={{...styles.modalView, ...props.style || {}}}>
          <Text style={styles.modalTitle}>{props.title}</Text>
          <Text style={styles.modalText}>{props.message}</Text>
          <View style={{flexDirection: 'row', marginTop: 30}}>
            <View style={{flex: 3}}></View>
            <TouchableOpacity style={{flex: 2, padding: 5}}>
              <Text style={{textAlign: 'right', fontWeight: 'bold', color: Theme.colors.accent}}></Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={props.onClose} style={{flex: 1, padding: 5}}>
              <Text style={{textAlign: 'center', fontWeight: 'bold', color: Theme.colors.accent}}>OK</Text>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  )
}

const popup = function(props){
  return props.visible ?
    <View style={{position: 'absolute', zIndex: 100, width: '100%', padding: 15, bottom: 0, backgroundColor: Theme.colors.darkerGray}}>
      <Text style={{padding: 0, color: "#fff"}}>{props.message}</Text>
    </View> : null
}

const loader = function(props){
  return (
    <Modal
      ref={props.ref || null}
      animationType="none"
      transparent={true}
      visible={props.visible}
    >
      <View style={styles.centeredView}>
        <View style={{...styles.modalView, width: '100%', ...props.style || {}}}>
          <Text style={{...styles.modalTitle, fontSize: 20}}>{props.title || "Connecting"}</Text>
          <View style={{flexDirection: 'row', marginTop: 5}}>
            <View style={{flex: 1.3, justifyContent: 'center', alignItems: 'center'}}>
              <ActivityIndicator size={50} color={Theme.colors.primary} />
            </View>
            <View style={{flex: 4}}>
              <Text style={{...styles.modalText}}>{props.message || "Please wait, connecting to server..."}</Text>
            </View>
          </View>
        </View>
      </View>
    </Modal>
  )
}

const loaderView = function(props){
  return (
    <Modal
      animationType="none"
      transparent={true}
      visible={props.visible}>
      <View style={styles.centeredView}>
        <View style={[{...styles.modalView, width: '100%', ...props.style || {}}, { backgroundColor: props.isDarkMode ? props.backgroundColor : Theme.colors.white }]}>
          <Text style={{...styles.modalTitle, fontSize: 20, color: props.color}}>{props.title || "Validating"}</Text>
          <View style={{flexDirection: 'row', marginTop: 5}}>
            <View style={{flex: 1.3, justifyContent: 'center', alignItems: 'center'}}>
              <ActivityIndicator size={50} color={Theme.colors.primary} />
            </View>
            <View style={{flex: 4}}>
              <Text style={[{...styles.modalText}, { color: props.color}]}>{props.message || "Please wait..."}</Text>
            </View>
          </View>
        </View>
      </View>
    </Modal>
  )
}

const logoutdialog = function(props){
  return (
    <Modal
      animationType="none"
      transparent={true}
      visible={props.visible}
    >
      <TouchableOpacity onPress={props.onClose} style={styles.centeredView}>
        <TouchableOpacity activeOpacity={1} style={{...styles.modalView, ...props.style || {}}}>
          <Text style={styles.modalTitle}>{props.title}</Text>
          <Text style={styles.modalText}>{props.message}</Text>
          <View style={{flexDirection: 'row', marginTop: 30}}>
            <View style={{flex: 3}}></View>
            <TouchableOpacity onPress={props.onClose} style={{flex: 2, padding: 5}}>
              <Text style={{textAlign: 'right', fontWeight: 'bold', color: Theme.colors.accent}}>CANCEL</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={props.onSubmit} style={{flex: 1, padding: 5}}>
              <Text style={{textAlign: 'center', fontWeight: 'bold', color: Theme.colors.accent}}>OK</Text>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  )
}

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 (
    <TouchableOpacity activeOpacity={1} onPress={!backdropCancellable ? () => {} : onPressNo} style={{
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: 'center',
      backgroundColor: 'rgba(0,0,0,.5)',
      paddingHorizontal: 25
    }}>
      <TouchableOpacity activeOpacity={1} onPress={null} style= {{
        backgroundColor: theme?.theme.dark ? theme.theme.colors.border : 'white',
        zIndex: 10,
        borderRadius: 10,
        alignItems: 'center'
      }}>
        {
          children ?
            children
            :
            <>
              <Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", fontWeight: 'bold', fontSize: 18, marginTop: 18, marginBottom: 19}}>{title}</Text>
              <Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", paddingHorizontal: 15, textAlign: 'center', fontSize: 18, marginBottom: 35}}>{body}</Text>

              <View style={{flexDirection: 'row', paddingHorizontal: 31, marginBottom: 18}}>
                { !yesButtonOnly && <TouchableOpacity onPress={onPressNo} style={{flex: 1, borderWidth: 1, borderColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginRight: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: Theme.colors.primary, fontSize: 17}}>{noText ? noText : "Cancel"}</Text></TouchableOpacity> }
                { !noButtonOnly && <TouchableOpacity onPress={onPressYes} style={{flex: 1, backgroundColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginLeft: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: 'white', fontSize: 17}}>{yesText ? yesText : "Yes"}</Text></TouchableOpacity> }
              </View>
            </>
        }
      </TouchableOpacity>

    </TouchableOpacity>
  )
}

const bottomselectmodal = function(props){
  let color = Theme.colors.textPrimary
  let items = props.items || []
  const renderContent = () => {
    return items.map((data, index) => {
      return (
        <TouchableOpacity onPress={data.onPress || null} key={index} style={{flexDirection: 'row', paddingBottom: index < items.length - 1 ? 30 : 0, bottom: Platform.OS == 'ios' ? 15 : 0,}}>
          {data.icon ? 
          <Text style={{flex: 0.4}}>
            <CustomIcon.MaterialCommunityIcons name={data.icon} size={25} color="#00000095" />
          </Text> : null}          
          <Text style={{flex: 3, color: color, fontSize: 14, padding: 5}}>{data.label}</Text>
        </TouchableOpacity>
      )
    })
  }

  return (
    <Modal
      animationType="none"
      transparent={true}
      visible={props.visible}
    >
      <TouchableOpacity onPress={props.onClose} style={styles.bottomView}>
        <TouchableOpacity activeOpacity={1} style={{...styles.modalView, width: '100%', padding: 30, paddingHorizontal: 20, ...props.style || {}}}>
          <View style={{flexDirection: 'column'}}>
            {renderContent()}
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  )
}

const promoGPS = function(props){
  return (
    <Modal
      animationType="none"
      transparent={true}
      visible={props.visible}>
      <TouchableOpacity onPress={props.onDismiss} style={styles.centeredView}>
        <TouchableOpacity activeOpacity={1} style={{...styles.modalView, ...props.style || {}, padding: 0}}>
          <Image 
            source={props.image} 
            style={{width: Theme.screen.w - 60, height: Theme.screen.h / 3.5, resizeMode: "stretch"}}
          />
          <View style={{padding: 20}}>
            <Text style={{fontSize: 16, fontWeight: 'bold', fontFamily: 'arial', color: Theme.colors.accent}}>
              {props.title}
            </Text>
          </View>
          <View style={{flexDirection: 'row', padding: 20, paddingTop: 15}}>
            <View style={{flex: 1}}></View>
            <TouchableOpacity onPress={props.onDismiss} activeOpacity={1} style={{flex: 1}}>
              <Text style={{color: Theme.colors.accent, fontWeight: 'normal', fontFamily: 'arial'}}>DISMISS</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={props.onOpen} activeOpacity={1} style={{flex: 1}}>
              <Text style={{color: Theme.colors.accent, fontWeight: 'normal', fontFamily: 'arial'}}>SEE DETAILS</Text>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  )
}

const notification = function(props){
  return (
    <Modal
      animationType="none"
      transparent={true}
      visible={props.visible}
      onRequestClose={props.onDismiss}>
      <TouchableOpacity activeOpacity={1} onPress={props.onDismiss} style={styles.centeredView}>
        <TouchableOpacity activeOpacity={1} style={{
          ...styles.modalView, 
          ...props.style || {},
          padding: 0, 
          width: Theme.screen.w - 60,
          borderRadius: 10
          }}>
          <View style={{padding: 20}}>
            <Text style={{fontSize: 18, fontWeight: 'bold', textAlign: 'left', fontFamily: 'arial', color: Theme.colors.textPrimary}}>
              {props.title}
            </Text>
          </View>
          <View style={{padding: 20, marginBottom: 20 }}>
            <Text style={{fontSize: 16, fontWeight: 'normal', textAlign: 'center', fontFamily: 'arial', color: Theme.colors.primary}}>
              {props.message}
            </Text>
          </View>
          <TouchableOpacity onPress={props.onClose} activeOpacity={0.5} style={{padding: 15, height: 50, alignItems: 'center', backgroundColor: Theme.colors.primary, borderBottomLeftRadius: 10, borderBottomRightRadius: 10}}>
            <View style={{flex: 1, padding: 0}}>
              <Text style={{color: "#fff", fontWeight: 'normal', fontFamily: 'arial'}}>CLOSE</Text>
            </View>
          </TouchableOpacity>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  )
}

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 (
      <Modal
        animationType="none"
        transparent={true}
        visible={props.visible}>
        <TouchableOpacity activeOpacity={1} onPress={() => { props.onCancel() }} style={styles.centeredView}>
            <View style={{
              margin: 25,
              backgroundColor: props?.isDarkMode ? props?.modalBackgroundColor : Theme.colors.white,
              borderRadius: 15,
              padding: 20,
              alignItems: "center",
              shadowColor: "#000",
              shadowOffset: {
                width: 0,
                height: 2
              },
              shadowOpacity: 0.25,
              shadowRadius: 4,
              elevation: 5
              }}>
              <DatePicker
                androidVariant = 'nativeAndroid'
                date={props.showDate ? undefined : currentDate} 
                maximumDate={new Date()}
                mode='date'
                onDateChange={(date) => { setCurrentDate(date) }}
                fadeToColor={Theme.colors.lightGray}
                textColor={props?.isDarkMode ? props?.textColor : Theme.colors.black}
              />
              <View style={{ flexDirection: 'row', alignSelf: 'flex-end' }}>
                <TouchableOpacity
                  style={{ paddingHorizontal: 10, height: 30, alignItems: 'center', justifyContent: 'center', borderRadius: 5, margin: 5 }}
                  onPress={() => { props.onCancel() }}>
                      <Text style={{ color: props?.isDarkMode ? Theme.colors.white : Theme.colors.black, fontFamily: 'arial', fontSize: 18 }}>CANCEL</Text>
                  </TouchableOpacity>
                <TouchableOpacity
                  style={{ paddingHorizontal: 5, height: 30, alignItems: 'center', justifyContent: 'center', borderRadius: 5, margin: 5 }}
                  onPress={() => { props.onConfirm(currentDate) }}>
                      <Text style={{ color: props?.isDarkMode ? Theme.colors.white : Theme.colors.black, fontFamily: 'arial', fontSize: 18 }}>OK</Text>
                  </TouchableOpacity>
              </View>
            </View>
        </TouchableOpacity>
    </Modal>
    )
  } else {
    var pickerRef = useRef()
    return <DateTimePickerModal
      ref={(r) => 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 (
          <View style={{ padding: 15, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
          <TouchableOpacity onPress={() => props.onCancel()} style={{padding: 10, marginRight: 5}}>
            <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>CANCEL</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {
            props.onConfirm(pickerRef.state.currentDate)
          }} style={{padding: 10, marginLeft: 5}}>
            <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>OK</Text>
          </TouchableOpacity>
          </View>
        )
      }}
      customCancelButtonIOS={() => null}
    />
  }
}

const CustomMonthPicker = (props) => {
  if(!props.visible) return null  
  return <MonthPicker
    value={new Date()}
    minimumDate={new Date()}
    maximumDate={props.maxDate}
    enableAutoDarkMode={true}
    onChange={props.onChange}
    okButton="Confirm"
  />
}

const ActionOption = (props) => {
  return (
    <Actionsheet isOpen={props.open} onClose={props.onClose}>
      <Actionsheet.Content>
        {props.buttons.map(item => (
          <Actionsheet.Item onPress={item.onPress}> 
              <Text>{item.name}</Text>
          </Actionsheet.Item>
        ))}
      </Actionsheet.Content>
    </Actionsheet>
  )
}

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,
}