ChargEco/Strides-APP/app/pages/chargingV2/DialogIdleFee.js

import React, { useState } from 'react';
import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
import { ElevationObject } from '../../components/Button';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';

const DialogIdleFee = ({
    idleFeeConfig
}) => {
  const [visible, showModal] = useState(false)
  return (
    <>
    <Pressable
      style={styles.cardView}
      onPress={() => showModal(true)}>
      <MaterialCommunityIcons
        name={"car-clock"}
        size={32}
        color={colorAccent}
      />
      <TextView style={styles.label}>This site has idle fees enabled.</TextView>
      <FontAwesome6
        name={"angle-right"}
        size={16}
        color={colorCancel}
      />
    </Pressable>
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      statusBarTranslucent={true}>
      <View style={styles.layer}>
        <View style={styles.dialog}>
          <TextView style={styles.title}>Idle Fees</TextView>
          <View style={styles.message}>
          
          { utils.isNotEmpty(idleFeeConfig.repeatDay) && <>
            <TextView style={styles.idleFeeLabel}>Effective Days: </TextView>
            <TextView style={styles.idleFeeText}>{utils.join(idleFeeConfig.repeatDay, ", ")}</TextView>
            </>
          }
          <TextView style={styles.idleFeeLabel}>Effective Time：</TextView>
          { idleFeeConfig.allDay
          ? <TextView style={styles.idleFeeText}>All day</TextView>
          : (utils.isNotEmpty(idleFeeConfig.startTime) && utils.isNotEmpty(idleFeeConfig.endTime)) &&
            <TextView style={styles.idleFeeText}>{idleFeeConfig.startTime + " - " + idleFeeConfig.endTime}</TextView>
          }
          { utils.isNotEmpty(idleFeeConfig.idleGracePeriod) &&
            <>
              <TextView style={styles.idleFeeLabel}>Grace Period: </TextView>
              <TextView style={styles.idleFeeText}>{idleFeeConfig.idleGracePeriod} min</TextView>
            </>
          }
          <TextView style={styles.idleFeeLabel}>Charging Rate: </TextView>
          <TextView style={styles.idleFeeText}>{idleFeeConfig.idleFee}/{idleFeeConfig.idleInterval} min </TextView>
          { utils.isNotEmpty(idleFeeConfig.idleFeeCap) &&
            <>
              <TextView style={styles.idleFeeLabel}>Idle Fee Cap: </TextView>
              <TextView style={styles.idleFeeText}>{idleFeeConfig.idleFeeCap}</TextView>
            </>
          }
          </View>
          {/* <TextView style={styles.message}>{
            "Grace Period of " + idleFeeConfig.idleGracePeriod + " Minutes. Rates are" + idleFeeConfig.idleFee + " per " + idleFeeConfig.idleInterval + " Min. Idle Fee is capped at " + idleFeeConfig.idleFeeCap
          }</TextView> */}
          <View style={ui.flexc}>
            <Button
              style={styles.confirmButton}
              text={$t("nav.ok")}
              borderRadius={0}
              onClick={() => showModal(false)}/>
          </View>
        </View>
      </View>
    </Modal>
    </>
)};

const B = ({children}) => {
  return <Text style={{fontWeight: "bold"}}>{children}</Text>
}

export default DialogIdleFee;

const styles = StyleSheet.create({
  cardView: {
    padding: 12,
    borderRadius: 10,
    marginBottom: 12,
    alignItems: 'center',
    flexDirection: 'row',
    ...ElevationObject(5),
    backgroundColor: colorLight,
    justifyContent: 'space-between'
  },
  layer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,.5)'
  },
  dialog: {
    width: Dialog.dialogWidth,
    borderRadius: isIOS ? 16 : 12,
    overflow: 'hidden',
    backgroundColor: colorLight
  },
  label: {
    flex: 1,
    color: textPrimary,
    fontSize: 14,
    fontWeight: 'bold',
    paddingLeft: 14
  },
  title: {
    paddingTop: 24,
    color: textPrimary,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: "center"
  },
  message: {
    color: textPrimary,
    fontSize: 14,
    paddingTop: 16,
    paddingLeft: 24,
    paddingRight: 24,
    paddingBottom: 32
  },
  idleFeeLabel: {
    color: textPrimary,
    fontSize: 14,
    paddingTop: 12,
    fontWeight: "bold"
  },
  idleFeeText: {
    color: textPrimary,
    fontSize: 14,
    paddingTop: 4
  },
  cancelButton: {
    flex: 1,
    borderRadius: 0,
    backgroundColor: "#F0F0F0"
  },
  confirmButton: {
    flex: 1,
    borderRadius: 0,
    backgroundColor: colorAccent
  }
})