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

interface Props {
    style?: StyleProp<ViewStyle>;
    payType: string;
    setPayType: (type: string) => void;
    premiumPay: any;
    loading: boolean;
    setShowTerms: (visible: boolean) => void;
    restorePurchases: () => 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, restorePurchases } = props;
    const bestValue = maxDiscountProduct(premiumPay)?.product_code
    const { t } = useTranslation();

    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" }}>
                        {t('loading', { ns: 'common' })}
                    </ThemedText>
                    :
                    premiumPay?.map((item: PayItem) => {
                        return <TouchableOpacity
                            onPress={async () => {
                                setPayType(item?.product_code);
                            }}
                            key={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 }]}>
                                    {t('rights.bestValue', { ns: 'personal' })}
                                </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, lineHeight: 32 }]}>
                                $ {(Number(item.unit_price.amount) - Number(item.discount_amount.amount)).toFixed(2)}
                            </ThemedText>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <ThemedText style={[styles.titleText, { fontSize: 12, color: "#AC7E35", textDecorationLine: 'line-through' }]}>
                                    $ {item.unit_price.amount}
                                </ThemedText>
                            </View>
                        </TouchableOpacity>
                    })
                }
            </ScrollView>
            <View style={{ flexDirection: 'row', gap: 8, marginLeft: 4, marginTop: 8 }}>
                <ThemedText style={{ color: '#AC7E35', fontSize: 10 }}>
                    {t('personal:rights.restorePurchase')}
                </ThemedText>
                <TouchableOpacity onPress={restorePurchases}>
                    <ThemedText style={{ color: '#E2793F', fontSize: 10, textDecorationLine: 'underline' }}>
                        {t('personal:rights.restore')}
                    </ThemedText>
                </TouchableOpacity>
            </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: 200,
        paddingBottom: 16
    },
    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'
    }
});