import {
  View,
  Text,
  TouchableOpacity,
  TextInput,
  ActivityIndicator,
} from "react-native";
import React from "react";
import { Props } from "./Referral.type";
import { styles } from "./Referral.style";
import { Share } from "react-native";
import CopyTextIcon from "../../assets/ReactSVG/CopyTextIcon";
import ReferIconSVG from "../../assets/ReactSVG/ReferIconSVG";
import QuestIcon from "../../assets/ReactSVG/QuestIcon";
import { LinearGradient } from "expo-linear-gradient";
import CustomText from "../../common/CustomText";

export default function Referral({
  header,
  descrption,
  primaryHeading,
  primaryDescription,
  shareButtonText,
  // style,
  referralLink,
  referralCode,
  loading,
  styleConfig,
  showRefferalLogo,
}: Props) {
  const handleInvite = () => {
    Share.share({
      message: referralLink + referralCode,
    });
  };

  return (
    <View style={styles.MainContainer}>
      <LinearGradient
        colors={["rgba(255, 255, 255, 0)", "#9035FF", "#0065FF"]}
        start={{ x: 0, y: 1 }}
        end={{ x: 0.6, y: 0 }}
        locations={[0.3824, 0.5939, 0.707]}
        style={[styles.mainViewStyle, { ...styleConfig?.Form }]}
      >
        <View style={{ paddingVertical: 40 }}>
          <CustomText fontStyle="semibold" style={[styles.headingText]}>
            {primaryHeading ? primaryHeading : "Refer and earn!"}
          </CustomText>
          <CustomText style={[styles.detailText]}>
            {primaryDescription
              ? primaryDescription
              : " Welcome back, Please complete your details"}
          </CustomText>
        </View>

        <View style={[styles.middalView, { ...styleConfig?.Modal }]}>
          {showRefferalLogo && (
            <View
              style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <View style={{ paddingTop: 20, paddingBottom: 20 }}>
                <ReferIconSVG />
              </View>
            </View>
          )}

          <View>
            <CustomText
            fontStyle="semibold"
              style={[styles.headerTextStyle, { ...styleConfig?.Heading }]}
            >
              {header || "Referral link and code"}
            </CustomText>
            <CustomText
              style={[
                styles.descriptionTextStyle,
                { ...styleConfig?.Description },
              ]}
            >
              {descrption ||
                "Share your unique referral code with friends and receive 10 coins in credits each time a friend signs up!"}
            </CustomText>
          </View>

          <View>
            <CustomText
              style={[styles.labelTextView, { ...styleConfig?.Label }]}
            >
              Invitation Link
            </CustomText>
            <View style={[styles.codeViewStyle, { ...styleConfig?.Input }]}>
              {!referralCode || loading ? (
                <ActivityIndicator size="small" color="#545454" />
              ) : (
                <>
                  <TextInput
                    style={[styles.codeTextStyle]}
                    value={referralCode ? referralLink + referralCode : ""}
                    // editable={false}
                    // selectTextOnFocus={false}
                  />
                  <CopyTextIcon />
                </>
              )}
            </View>
          </View>

          <LinearGradient
            colors={["#9035FF", "#0065FF"]}
            start={{ x: 0.1, y: 0 }}
            end={{ x: 1, y: 1 }}
            locations={[0.0036, 1]}
            style={[
              styles.inviteButtonViewStyle,
              { ...styleConfig?.PrimaryButton },
            ]}
          >
            <TouchableOpacity
              onPress={handleInvite}
              style={{
                justifyContent: "center",
                alignItems: "center",
                width: "100%",
                paddingVertical: 13,
              }}
            >
              <CustomText fontStyle="semibold" style={[styles.buttonTextStyle]}>
                {shareButtonText || "Share Referral Link"}
              </CustomText>
            </TouchableOpacity>
          </LinearGradient>
        </View>
      </LinearGradient>
      <View
        style={[styles.footerView, { ...styleConfig?.Footer?.FooterStyle }]}
      >
        <View style={[styles.footerInnerView]}>
          <CustomText
            style={[styles.footerText, { ...styleConfig?.Footer?.FooterText }]}
          >
            Powered by Quest Labs
          </CustomText>
          <QuestIcon color={styleConfig?.Footer?.FooterIcon?.color} />
        </View>
      </View>
    </View>
  );
}