import {
  View,
  Text,
  ImageBackground,
  TouchableOpacity,
  Image,
  FlatList,
  Platform,
} from "react-native";
import React from "react";
import { styles } from "../../style";
import Images from "@src/utils/images";
import { useValues } from "@src/utils/context/index";
import { appColors, windowHeight } from "@src/themes";
import { Copied } from "@src/utils/icons";
import Clipboard from "@react-native-clipboard/clipboard";
import { useAppNavigation } from "@src/utils/navigation";
import { useSelector } from "react-redux";
import { notificationHelper } from "@src/commonComponent";

export function Coupons({ couponsList, route }: any) {
  const { isDark, textColorStyle, viewRTLStyle, textRTLStyle } = useValues();
  const { navigate, goBack }: any = useAppNavigation();
  const { translateData } = useSelector((state: any) => state.setting);
  const { zoneValue } = useSelector((state: any) => state.zone);

  const copyToClipboard = (coupon: any) => {
    Clipboard.setString(coupon.code);
    Platform.OS === "ios" &&
      notificationHelper("", translateData.copyClipboard, "success");
    if (route?.params?.getCoupon) {
      route.params.getCoupon(coupon);
    }
    if (route?.params?.from === "payment") {
      goBack();
    }
  };

  const gotoDetails = (item: any) => {
    navigate("PromoCodeDetail", { item });
  };

  const renderItem = ({ item }: { item: any }) => {
    const discountText =
      item.type === "percentage"
        ? `${translateData.flat} ${Math.round(item.amount)}${translateData.offPercentage
        }`
        : `${translateData.flatDoller} ${zoneValue?.currency_symbol
        }${Math.round(item.amount)} ${translateData.off}`;

    return (
      <TouchableOpacity onPress={() => gotoDetails(item)} activeOpacity={0.7}>
        <View
          style={[
            styles.promoCodeImageBackground,
            {
              backgroundColor: isDark
                ? appColors.solidBorder
                : appColors.whiteColor,
              borderColor: isDark
                ? appColors.darkBorder
                : appColors.loaderPrimary,
            },
          ]}
        >
          <ImageBackground
            source={Images.promoCodeBg}
            style={styles.image}
            resizeMode="stretch"
          >
            <Text style={[styles.promoCodeText]}>{discountText}</Text>
            <TouchableOpacity
              style={[
                styles.copyBox,
                {
                  backgroundColor: isDark
                    ? appColors.blackColor
                    : appColors.whiteColor,
                },
              ]}
              activeOpacity={0.7}
              onPress={() => copyToClipboard(item)}
            >
              <Text
                style={[
                  styles.promoCodeCodeText,
                  {
                    color: isDark ? appColors.whiteColor : appColors.blackColor,
                  },
                ]}
              >
                {item.code}
              </Text>
            </TouchableOpacity>
          </ImageBackground>

          <Text
            style={[
              styles.promoCodeSubtitle,
              { color: isDark ? appColors.darkText : appColors.gray },
            ]}
          >
            {item.description.length > 30
              ? `${item.description.slice(0, 30)}...`
              : item.description}
          </Text>
          <View
            style={[
              styles.line,
              {
                borderBottomColor: isDark
                  ? appColors.darkBorder
                  : appColors.loaderPrimary,
              },
            ]}
          />
          {item.end_date ? (
            <View
              style={{
                flexDirection: viewRTLStyle,
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <Text
                style={[
                  styles.promoCodeSubtitle,
                  {
                    textAlign: textRTLStyle,
                    color: isDark ? appColors.darkText : appColors.gray,
                  },
                ]}
              >
                {translateData.validTill}
              </Text>
              <Text
                style={[
                  styles.promoCodeSubtitle,
                  {
                    textAlign: textRTLStyle,
                    color: isDark ? appColors.darkText : appColors.gray,
                  },
                ]}
              >
                {item.end_date}
              </Text>
            </View>
          ) : (
            <Text
              style={[
                styles.promoCodeSubtitle,
                {
                  textAlign: textRTLStyle,
                  color: isDark ? appColors.darkText : appColors.gray,
                },
              ]}
            >{translateData.validTill} : {translateData?.comingsoon || "Coming Soon"}</Text>
          )}
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <View>
      <FlatList
        data={couponsList?.data || []}
        keyExtractor={(item, index) => index.toString()}
        renderItem={renderItem}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: windowHeight(100) }}
        numColumns={2}
      />
    </View>
  );
}
