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

export function PromoCodeDetail({ route }) {
  const { item } = route.params;
  const {
    bgFullStyle,
    linearColorStyle,
    isDark,
    textColorStyle,
    bgFullLayout,
    viewRTLStyle,
    textRTLStyle,
  } = useValues();
  const { goBack } = useNavigation();
  const { translateData } = useSelector((state) => state.setting);

  const formatDate = (dateString: string): string => {
    const date = new Date(dateString);
    if (isNaN(date.getTime())) {
      return "Invalid date";
    }
    const day = date.getDate();
    const month = date.toLocaleString("default", { month: "long" });
    const year = date.getFullYear();

    const ordinal =
      day % 10 === 1 && day !== 11
        ? "st"
        : day % 10 === 2 && day !== 12
          ? "nd"
          : day % 10 === 3 && day !== 13
            ? "rd"
            : "th";
    return `${day}${ordinal} ${month} ${year}`;
  };

  const copyToClipboard = (coupon) => {
    Clipboard.setString(coupon.code);
    Platform.OS === "ios" &&
      notificationHelper("", translateData.copyClipboard, "success");
    goBack();
  };

  const renderTags = (data, label) => {
    if (!data || data.length === 0) return null;

    return (
      <View style={styles.tagContainer}>
        <Text
          style={[
            styles.label,
            { color: textColorStyle, textAlign: textRTLStyle },
          ]}
        >
          {label}:
        </Text>
        <View
          style={[styles.subLabelContainer, { flexDirection: viewRTLStyle }]}
        >
          {data.map((item) => (
            <Text
              key={item.id}
              style={[styles.labelName, { textAlign: textRTLStyle }]}
            >
              {item.name}
            </Text>
          ))}
        </View>
      </View>
    );
  };

  return (
    <View style={[styles.container, { backgroundColor: bgFullLayout }]}>
      <View style={[styles.headerContainer, { backgroundColor: bgFullStyle }]}>
        <HeaderContainer value={translateData.promoCodeDetails} />
      </View>
      <View style={styles.detailsContainer}>
        <View
          style={[
            styles.detailsComonent,
            {
              backgroundColor: isDark
                ? appColors.primaryText
                : appColors.whiteColor,
            },
          ]}
        >
          <View style={[external.fd_row, { flexDirection: viewRTLStyle }]}>
            <View style={[styles.titleContainer, { alignSelf: textRTLStyle }]}>
              <View style={[styles.titleBg, { alignSelf: textRTLStyle }]}>
                <Text style={[{ textAlign: textRTLStyle }]}>
                  {item.code}
                </Text>
              </View>
              <Text
                style={[
                  styles.title,
                  { color: textColorStyle },
                  { textAlign: textRTLStyle },
                ]}
              >
                {item.title}
              </Text>
            </View>
          </View>
          <Text style={[styles.discription, { textAlign: textRTLStyle }]}>
            {item.description}
          </Text>
          <View
            style={[
              styles.line,
              {
                backgroundColor: isDark
                  ? appColors.solidBorder
                  : appColors.lightGray,
              },
            ]}
          />
          {item?.services?.length > 0 &&
            renderTags(item.services, translateData?.services)}

          {item?.vehicle_types?.length > 0 &&
            renderTags(item.vehicle_types, translateData?.vehicle)}

          {item.end_date && (
            <View style={[styles.dateContainer]}>
              <Text
                style={[
                  styles.label,
                  { color: textColorStyle },
                  { textAlign: textRTLStyle },
                ]}
              >
                {translateData.validTill}:
              </Text>
              <Text style={[styles.date, { textAlign: textRTLStyle }]}>
                {`\u2022 ${translateData.offerValidUntil} ${formatDate(
                  item.end_date
                )}`}
              </Text>
            </View>
          )}
        </View>
        <TouchableOpacity
          activeOpacity={0.7}
          style={[
            styles.copyBtn,
            {
              flexDirection: viewRTLStyle,
              backgroundColor: isDark
                ? appColors.whiteColor
                : appColors.blackColor,
            },
          ]}
          onPress={() => copyToClipboard(item)}
        >
          <Copied
            color={isDark ? appColors.blackColor : appColors.whiteColor}
          />
          <Text
            style={[
              styles.btnText,
              { color: isDark ? appColors.blackColor : appColors.whiteColor },
            ]}
          >
            {item.code}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}
