import Button from "@/components/ui/Button";
import CircleBg from "@/components/ui/CircleBg";
import { useColor } from "@/hooks/useColor";
import { Feather } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { XIcon } from "phosphor-react-native";
import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

const SIZE = 100;

const CheckoutScreen = () => {
  const { status } = useLocalSearchParams<{
    status: string;
  }>();
  const { primary } = useColor();
  return (
    <SafeAreaView className="bg-white dark:bg-n900 h-full">
      <ScrollView>
        <View className="w-full justify-center min-h-[85vh] px-6 my-8 items-center ">
          <View style={[styles.dot, { backgroundColor: primary.base }]} className=" items-center justify-center">
            {status === "success" ? <Feather name="check" size={48} color="white" style={{ zIndex: 100 }} /> : <XIcon size={48} color="white" style={{ zIndex: 100 }} />}

            {!["success", "cancel"].includes(status) ? [...Array(3).keys()].map((_, idx) => <CircleBg key={idx} index={idx} />) : null}
          </View>

          <View className="py-20">
            <Text className="text-2xl font-bold text-center dark:text-white">Payment {status === "success" ? "Successfully" : status === "cancel" ? "Cancelled" : "Failed"}!</Text>
            <Text className="text-[14px] text-n500 dark:text-blackN500 text-center pt-3 px-6">
              {status === "success" ? "Your payment has been processed successfully." : status === "cancel" ? "Your payment has been cancelled" : "Your payment has been failed."}
            </Text>
          </View>

          <Button
            onPress={() => {
              router.back();
            }}
            text="Okay"
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default CheckoutScreen;

const styles = StyleSheet.create({
  dot: {
    height: SIZE,
    width: SIZE,
    borderRadius: SIZE / 2,
  },
});
