import BlackStarSvg from '@/assets/icons/svg/blackStar.svg';
import { ThemedText } from "@/components/ThemedText";
import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from "react-native";
import { ScrollView } from 'react-native-gesture-handler';
import { maxDiscountProduct } from './utils';

interface Props {
    style?: StyleProp<ViewStyle>;
    payType: string;
    setPayType: (type: string) => void;
    premiumPay: any;
    loading: boolean;
    setShowTerms: (visible: boolean) => void;
}

export interface PayItem {
    id: number;
    product_id: number;
    product_type: string;
    product_code: string;
    product_name: string;
    unit_price: {
        amount: string;
        currency: string;
    },
    discount_amount: {
        amount: string;
        currency: string;
    }

}
const Premium = (props: Props) => {
    const { style, payType, setPayType, premiumPay, loading, setShowTerms } = props;
    const bestValue = maxDiscountProduct(premiumPay)?.product_code

    return (
        <View style={[styles.proInfo, style]}>
            <ScrollView
                contentContainerStyle={{ gap: 16 }}
                showsVerticalScrollIndicator={false}
                horizontal={true}
                showsHorizontalScrollIndicator={false}
            >
                {loading
                    ?
                    <ThemedText style={{ fontSize: 12, color: "#4C320C", fontWeight: "700", width: "100%", textAlign: "center" }}>
                        Loading...
                    </ThemedText>
                    :
                    premiumPay?.map((item: PayItem) => {
                        return <TouchableOpacity
                            onPress={async () => {
                                setPayType(item?.product_code);
                            }}
                            style={[styles.yearly, { borderColor: payType === item?.product_code ? '#FFB645' : '#E1E1E1', opacity: payType === item?.product_code ? 1 : 0.5 }]}
                            activeOpacity={0.8}
                        >
                            <View style={[styles.title, { opacity: item?.product_code === bestValue ? 1 : 0 }]}>
                                <BlackStarSvg />
                                <ThemedText style={[styles.titleText, { fontSize: 14 }]}>
                                    Best Value
                                </ThemedText>
                                <BlackStarSvg />
                            </View>
                            <ThemedText style={[styles.titleText, { fontSize: 16 }]}>
                                {item.product_code?.split('_')[item.product_code?.split('_')?.length - 1]}
                            </ThemedText>
                            <ThemedText style={[styles.titleText, { fontSize: 32 }]}>
                                $ {item.unit_price.amount}
                            </ThemedText>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <ThemedText style={[styles.titleText, { fontSize: 12, color: "#AC7E35", textDecorationLine: 'line-through' }]}>
                                    $ {item.discount_amount.amount}
                                </ThemedText>
                            </View>
                        </TouchableOpacity>
                    })
                }
            </ScrollView>
            <View style={{ flexDirection: 'row', gap: 8, marginLeft: 4 }}>
                <ThemedText style={{ color: '#AC7E35', fontSize: 10 }}>
                    Cancel anytime before renewal. Learn more
                </ThemedText>
                <ThemedText style={{ color: '#E2793F', fontSize: 10, textDecorationLine: 'underline' }} onPress={() => setShowTerms(true)}>
                    Terms & Conditions
                </ThemedText>
            </View>
        </View>
    );
}

export default Premium;
const styles = StyleSheet.create({
    proInfo: {
        borderRadius: 24,
        display: "flex",
        width: "100%",
    },
    yearly: {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: 16,
        borderColor: "#FFB645",
        borderWidth: 2,
        borderRadius: 24,
        width: "48%",
        paddingBottom: 16
    },
    quarterly: {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 20,
        borderColor: "#FAF9F6",
        borderWidth: 2,
        borderRadius: 24,
        width: "48%",
        paddingBottom: 16,
        height: "100%",
    },
    title: {
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        gap: 8,
        backgroundColor: "#FFB645",
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        padding: 4,
        width: "100%"
    },
    titleText: {
        color: '#4C320C',
        fontWeight: '700'
    }
});