import React, { useEffect, useState } from 'react';
import { Modal, View, StyleSheet } from 'react-native';
import apiPayment from '../../api/apiPayment';
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import TextView from '../../components/TextView';
import { i18nUtil } from '../../i18n';

const DialogPayPerUse = ({
  amount="",
  visible,
  onClose
}) => {
  const [content, setContent] = useState();
  useEffect(() => {
    if (i18nUtil.isChinese()) {
      setContent($t("payment.tipsPayPerUseAmount").replace("{mm}", amount));
    } else {
      apiPayment.getPayPerUseAlter().then(res => {
        if (res.data) {
          setContent(res.data);
        }
      }).catch(err => {
        setContent($t("payment.tipsPayPerUseAmount").replace("{mm}", amount));
      });
    }
  }, []);
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      statusBarTranslucent={true}>
      <View style={styles.container}>
        <View style={styles.content}>
          <TextView style={styles.title}>{$t("payment.titleNote")}</TextView>
          <TextView style={styles.message}>{content}</TextView>
          <View style={styles.buttonsDivide}></View>
          <View style={ui.flexc}>
            <Button
              style={styles.cancelButton}
              text={$t("nav.cancel")}
              textColor={textPrimary}
              onClick={() => onClose(false)}/>
            <Button
              style={styles.confirmButton}
              text={$t("nav.confirm")}
              borderRadius={0}
              onClick={() => onClose(true)}/>
          </View>
        </View>
      </View>
    </Modal>
  )
};

export default DialogPayPerUse;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,.5)'
  },
  content: {
    width: Dialog.dialogWidth,
    borderRadius: 16,
    overflow: 'hidden',
    backgroundColor: colorLight
  },
  title: {
    paddingTop: 24,
    paddingLeft: 24,
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold'
  },
  message: {
    color: textPrimary,
    fontSize: 14,
    paddingTop: 16,
    paddingLeft: 24,
    paddingRight: 24,
    paddingBottom: 32
  },
  cancelButton: {
    flex: 1,
    borderRadius: 0,
    backgroundColor: "#F0F0F0"
  },
  confirmButton: {
    flex: 1,
    borderRadius: 0,
    backgroundColor: colorAccent
  }
})