import { MaterialCommunityIcons } from "@expo/vector-icons";
import { openBrowserAsync, WebBrowserPresentationStyle } from "expo-web-browser";
import { Pressable, StyleSheet, Text, View } from "react-native";

import { PAYMENT_PROVIDERS, type PaymentProvider } from "@/constants/payment-providers";

export function PaymentLinks() {
    return (
        <View style={styles.container}>
            <Text style={styles.message}>გადაიხადეთ სახლიდან გაუსვლელად ნებისმიერი ქართული ბარათით:</Text>

            <View style={styles.links}>
                {PAYMENT_PROVIDERS.map((provider) => (
                    <PaymentLink key={provider.id} provider={provider} />
                ))}
            </View>
        </View>
    );
}

function PaymentLink({ provider }: { provider: PaymentProvider }) {
    async function openPaymentProvider() {
        await openBrowserAsync(provider.url, {
            presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,
        });
    }

    return (
        <Pressable
            accessibilityRole="link"
            onPress={openPaymentProvider}
            style={({ pressed }) => [
                styles.badge,
                {
                    backgroundColor: provider.color,
                    borderColor: provider.borderColor ?? provider.color,
                },
                pressed ? styles.pressed : undefined,
            ]}
        >
            <Text style={styles.badgeText}>{provider.name}</Text>
            <MaterialCommunityIcons name="open-in-new" size={14} color="#ffffff" />
        </Pressable>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#eef7ff",
        borderColor: "#b6dcff",
        borderRadius: 8,
        borderWidth: 1,
        gap: 12,
        padding: 14,
    },
    message: {
        color: "#1b4f72",
        fontSize: 14,
        lineHeight: 20,
    },
    links: {
        flexDirection: "row",
        flexWrap: "wrap",
        gap: 8,
    },
    badge: {
        alignItems: "center",
        borderRadius: 999,
        borderWidth: 1,
        flexDirection: "row",
        gap: 5,
        minHeight: 34,
        paddingHorizontal: 12,
    },
    badgeText: {
        color: "#ffffff",
        fontSize: 12,
        fontWeight: "800",
        lineHeight: 16,
    },
    pressed: {
        opacity: 0.78,
    },
});