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

const DialogPayPerUse = ({
  amount="",
  visible,
  onClose
}) => (
  <Modal
    visible={visible}
    transparent={true}>
    <View style={styles.container}>
      <View style={styles.content}>
        <TextView style={styles.title}>{$t("payment.titleNote")}</TextView>
        <TextView style={styles.message}>{$t("payment.tipsPayPerUseAmount").replace("{mm}", amount)}</TextView>
        <Button
          text={$t("nav.confirm")}
          onClick={() => onClose(true)}/>
        <Button
          style={styles.cancelButton}
          text={$t("nav.cancel")}
          textColor={textPrimary}
          onClick={() => onClose(false)}/>
      </View>
    </View>
  </Modal>
);

export default DialogPayPerUse;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,.4)'
  },
  content: {
    width: Dialog.dialogWidth,
    padding: 16,
    borderRadius: 4,
    backgroundColor: colorLight
  },
  title: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold'
  },
  message: {
    color: textPrimary,
    fontSize: 14,
    paddingTop: 16,
    paddingBottom: 32
  },
  cancelButton: {
    marginTop: 8,
    borderColor: '#EEE',
    borderWidth: 1,
    backgroundColor: textButton
  }
})