import { View, Text, TouchableOpacity } from "react-native";
import React, { useState } from "react";
import { Props } from "./Pricing.types";
import { styles } from "./Pricing.styles";
import DownArrow from "../../assets/ReactSVG/DownArrow";
import RightCircle from "../../assets/ReactSVG/RightCircle";
import Payment from "../Payment/Payment";
import { PaymentIntent } from "@stripe/stripe-react-native";
import { TCard } from "../Payment/Payment.types";

export default function Pricing(Props: Props) {
  const [openIndex, setOpenIndex] = useState(-1);
  const [showPayment, setShowPayment] = useState(false);

  const toggleComponent = (index: number) => {
    setOpenIndex((prevIndex) => (prevIndex === index ? -1 : index));
    if (Props.onPlanSelect) {
      if (openIndex === index) {
        Props.onPlanSelect(undefined);
      } else {
        const plan = Props.data[index];
        Props.onPlanSelect(plan);
      }
    }
  };

  const onContinue = () => {
    setShowPayment(true);
  };

  const onPaymentSuccess = (paymentIntent: PaymentIntent.Result) => {
    setShowPayment(false);
    if (Props.onPaymentSuccess) {
      Props.onPaymentSuccess(paymentIntent);
    }
  };

  if (showPayment) {
    return (
      <Payment
        onBack={() => setShowPayment(false)}
        stripePublishableKey={Props.stripePublishableKey}
        createPaymentIntent={Props.createPaymentIntent}
        onPaymentSuccess={onPaymentSuccess}
      />
    );
  }

  return (
    <View style={[styles.mainViewStyle, Props.mainViewStyle]}>
      {/* header Title View */}
      <View style={[styles.headerViewStyle, Props.headerViewStyle]}>
        <Text style={[styles.headerTextStyle, Props.headerTextStyle]}>
          {Props.headerTitle ? Props.headerTitle : "Choose Plan"}
        </Text>
      </View>
      {/* header Details View */}
      <View
        style={[styles.headerDetaileViewStyle, Props.headerDetaileViewStyle]}
      >
        <Text
          style={[styles.headerDetaileTextStyle, Props.headerDetaileTextStyle]}
        >
          {Props.detaileText
            ? Props.detaileText
            : "  Select the offer the best suits your need"}
        </Text>
      </View>

      {/* plans */}

      <View style={[styles.planOutterViewStyle, Props.planOutterViewStyle]}>
        {Props.data.map((item, index) => {
          const isOpen = index === openIndex;

          return (
            <View
              key={index}
              style={[styles.boxOutterViewStyle, Props.boxOutterViewStyle]}
            >
              {!isOpen ? (
                <TouchableOpacity
                  onPress={() => toggleComponent(index)}
                  style={[styles.boxViewStyle, Props.boxViewStyle]}
                >
                  <View
                    style={[
                      styles.boxPlanTextViewStyle,
                      Props.boxPlanTextViewStyle,
                    ]}
                  >
                    <Text
                      style={[styles.boxPlanTextStyle, Props.boxPlanTextStyle]}
                    >
                      {item.plan}
                    </Text>
                  </View>
                  <View
                    style={[
                      styles.boxAmountViewStyle,
                      Props.boxAmountViewStyle,
                    ]}
                  >
                    <Text
                      style={[
                        styles.boxAmountTextStyle,
                        Props.boxAmountTextStyle,
                      ]}
                    >
                      <Text
                        style={[
                          styles.boxAmountTextStyle,
                          Props.boxAmountTextStyle,
                          { fontWeight: "500", fontSize: 16 },
                        ]}
                      >
                        ${item.price}
                      </Text>
                      /{item.recurringTimePeriod}
                    </Text>
                    <DownArrow />
                  </View>
                </TouchableOpacity>
              ) : (
                // open
                <View key={index}>
                  <TouchableOpacity
                    onPress={() => toggleComponent(index)}
                    style={[styles.openBoxViewStyle, Props.openBoxViewStyle]}
                  >
                    <View
                      style={[
                        styles.boxInnerHeaderViewStyle,
                        Props.boxInnerHeaderViewStyle,
                      ]}
                    >
                      <View
                        style={[
                          styles.boxInnerHeaderTextViewStyle,
                          Props.boxInnerHeaderTextViewStyle,
                        ]}
                      >
                        <Text
                          style={[
                            styles.boxInnerHeaderTextStyle,
                            Props.boxInnerHeaderTextStyle,
                          ]}
                        >
                          {item.plan}
                        </Text>
                      </View>
                      <View
                        style={[
                          styles.boxInnerIconViewStyle,
                          Props.boxInnerIconViewStyle,
                        ]}
                      >
                        <DownArrow />
                      </View>
                    </View>

                    <View
                      style={[
                        styles.boxInnerDetailsTextViewStyle,
                        Props.boxInnerDetailsTextViewStyle,
                      ]}
                    >
                      <Text
                        style={[
                          styles.boxInnerDetailsTextStyle,
                          Props.boxInnerDetailsTextStyle,
                        ]}
                      >
                        {item.description}
                      </Text>
                    </View>
                    {/* list */}
                    <View>
                      <View
                        style={[
                          styles.boxInnerAmountViewStyle,
                          Props.boxInnerAmountViewStyle,
                        ]}
                      >
                        <Text
                          style={[
                            styles.boxInnerAmountTextStyle,
                            Props.boxInnerAmountTextStyle,
                          ]}
                        >
                          <Text
                            style={[
                              styles.boxInnerAmountTextStyle,
                              Props.boxInnerAmountTextStyle,
                              { fontWeight: "500", fontSize: 16 },
                            ]}
                          >
                            ${item.price}
                          </Text>
                          /{item.recurringTimePeriod}
                        </Text>
                      </View>

                      {item.offer.map((e, index) => {
                        return (
                          <View
                            key={index}
                            style={[
                              styles.offerViewStyle,
                              Props.offerViewStyle,
                            ]}
                          >
                            <RightCircle />
                            <View
                              style={[
                                styles.offerTextViewStyle,
                                Props.offerTextViewStyle,
                              ]}
                            >
                              <Text
                                style={[
                                  styles.offerTextStyle,
                                  Props.offerTextStyle,
                                ]}
                              >
                                {e}
                              </Text>
                            </View>
                          </View>
                        );
                      })}
                    </View>
                  </TouchableOpacity>
                </View>
              )}
            </View>
          );
        })}
      </View>

      {openIndex != -1 && (
        <View
          style={[styles.buttonOutterViewStyle, Props.buttonOutterViewStyle]}
        >
          <TouchableOpacity
            style={[styles.buttonViewStyle, Props.buttonViewStyle]}
            onPress={onContinue}
          >
            <Text style={[styles.buttonTextStyle, Props.buttonTextStyle]}>
              Continue
            </Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
}