import React, { useState } from "react";
import { Props } from "./Credit.types";
import { styles } from "./Credit.styles";
import {
  Text,
  TouchableOpacity,
  View,
  Modal,
  Alert,
  Pressable,
  Image,
} from "react-native";
import CrossIcon from "../../assets/ReactSVG/CrossIcon";
import Crown from "../../assets/ReactSVG/Crown";

export default function Credit(Props: Props) {
  const [modalVisible, setModalVisible] = useState(false);

  const onBuy = () => {
    if (Props.onBuy) {
      Props.onBuy();
    }
    setModalVisible(true);
  };
  const onUpgrade = () => {
    if (Props.onUpgrade) {
      Props.onUpgrade();
    }
  };
  const onHelp = () => {
    if (Props.onHelp) {
      Props.onHelp();
    }
  };
  return (
    <View>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
          setModalVisible(!modalVisible);
        }}
      >
        <View style={[styles.centeredView, Props.centeredView]}>
          <View style={[styles.modalView, Props.modalView]}>
            <View style={[styles.crossIconViewStyle, Props.crossIconViewStyle]}>
              <Pressable onPress={() => setModalVisible(!modalVisible)}>
                <CrossIcon />
              </Pressable>
            </View>
            <View
              style={[styles.modalInnerViewStyle, Props.modalInnerViewStyle]}
            >
              <Image
                source={require("../../assets/Success.png")}
                style={[styles.successImageStyle, Props.successImageStyle]}
              />
              <Text style={[styles.modalText, Props.modalText]}>
                {Props.successTitleText
                  ? Props.successTitleText
                  : "You’ve got free credits!"}
              </Text>
              <Text
                style={[styles.descritionTextStyle, Props.descritionTextStyle]}
              >
                {Props.successDescriptionText
                  ? Props.successDescriptionText
                  : " We’ve added free $20 credits to your account"}
              </Text>
            </View>
          </View>
        </View>
      </Modal>

      <View style={[styles.buttonViewStyle, Props.buttonViewStyle]}>
        <TouchableOpacity
          style={[styles.buttonInnerViewStyle, Props.buttonInnerViewStyle]}
          onPress={onUpgrade}
        >
          <Text
            style={[styles.buttonTitleTextStyle, Props.buttonTitleTextStyle]}
          >
            {Props.upgradeText ? Props.upgradeText : "Upgrade"}
          </Text>
          <Crown color={"white"} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.buttonInnerViewStyle} onPress={onHelp}>
          <Text style={styles.buttonTitleTextStyle}>
            {Props.helpText ? Props.helpText : "Help Center ?"}
          </Text>
        </TouchableOpacity>
      </View>
      <View style={[styles.CreditViewStyle, Props.creditViewStyle]}>
        <Text style={[styles.CreditTitleTextStyle, Props.creditTitleTextStyle]}>
          {Props.creditTitleText ? Props.creditTitleText : "Remaining Credit:"}
        </Text>
        <Text style={styles.CreditTitleTextStyle}>
          {Props.creditNumber ? Props.creditNumber : "123"}
        </Text>

        <TouchableOpacity
          style={[styles.buyButtonViewStyle, Props.buyButtonViewStyle]}
          onPress={onBuy}
        >
          <Text style={[styles.buyButtonTextStyle, Props.buyButtonTextStyle]}>
            {Props.buttonText ? Props.buttonText : "Buy"}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}