import React, { useEffect, useState, useRef } from 'react';
import * as Animatable from 'react-native-animatable';
import { Text, StyleSheet, Image, View, Pressable, Animated } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import LinearGradient from 'react-native-linear-gradient';
import { postRequest } from '@/netWork/';
import { useLoginCom } from '@/components/useLogin';
import { NftGroupCard } from '@/components/nftGroupCard';

interface Props {
    navigation: any;
}

const topScroll = {
    from: { top: 0 },
    to: { top: -1000}
}

const Home = (props: Props) => {
    const { isLogin, goTwitterAuthorize } = useLoginCom(props);
    const [nftData, setNftData] = useState([]);
    const goTwitter = () => {
        if (isLogin) {
            props.navigation.navigate('Twitter');
        } else {
            goTwitterAuthorize();
        }
    };

    useEffect(() => {
        if (isLogin) {
            postRequest('/denet/nft/group/listJoinNftGroup', {
                pageNum: 1,
                pageSize: 100,
            }).then((res: any) => {
                console.log('nftData', res);
                setNftData(res.data);
            });
        }
    }, [props.navigation, isLogin]);

    return (
        <LinearGradient
            colors={['#91CAFF', '#ECF6FF', '#FFFFFF']}
            style={{ flex: 1 }}>
            <SafeAreaView style={styles.container}>
                <View style={styles.denetWrap}>
                    <Image
                        style={styles.denet}
                        source={ require('../../static/img/home/welcome.png') }
                    />
                    <View style={styles.goods}>
                        <Animatable.View
                            animation={topScroll}
                            duration={25000}
                            easing="linear"
                            iterationCount="infinite">
                            <Image
                                style={styles.goodsImg}
                                source={ require('../../static/img/home/goods.png') }>
                            </Image>
                        </Animatable.View>
                        
                    </View>
                </View>
                <Pressable style={styles.TwitterBtnWrap} onPress={goTwitter}>
                    <View style={styles.TwitterLayer}>
                        <Image
                            style={styles.twitterIcon}
                            source={ require('../../static/img/home/twritter.png') }
                        />
                        <Text style={styles.twitterFont}>Web3 Twitter</Text>
                    </View>
                </Pressable>
                <View style={{ flexDirection: 'row' }}>
                    <NftGroupCard nftData={nftData} />
                </View>
            </SafeAreaView>
        </LinearGradient>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    denetWrap: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 280,
        paddingLeft: 16,
        paddingRight: 16,
    },
    denet: {
        width: 178,
        height: 120,
    },
    goods: {
        position: 'relative',
        width: 180,
        height: 280,
        overflow: 'hidden',
    },
    goodsImg: {
        position: 'absolute',
        width: 180,
        height: 2000,
        top: 0,
    },
    TwitterBtnWrap: {
        paddingLeft: 16,
        paddingRight: 16,
        textAlign: 'left',
    },
    TwitterLayer: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        height: 64,
        paddingLeft: 20,
        paddingRight: 20,
        borderRadius: 10,
        backgroundColor: '#fff',
    },
    twitterIcon: {
        width: 40,
        height: 40,
        borderRadius: 4,
        marginRight: 20,
    },
    twitterFont: {
        flex: 1,
        fontSize: 16,
    },
});

export default Home;
