import React, { Component } from 'react'
import { Text, View, Image, FlatList, Dimensions, ActivityIndicator, StyleSheet } from 'react-native'
import { Container, CardItem, Card, Left, Fab, Button, Icon } from 'native-base'
import { withNavigation } from 'react-navigation'
import Axios from 'axios';
import AsyncStorage from '@react-native-community/async-storage';
import { ScrollView } from 'react-native-gesture-handler';
import Header1 from '../component/Header1';

const styles = StyleSheet.create({
    button1: {
        marginVertical: 10,
        marginHorizontal: 10,
        alignItems: 'center',
        justifyContent: 'center',
        width: Dimensions.get('window').width * 1 / 5,
        backgroundColor: '#ddfffb',
    },
    text1: {
        color: '#ffffff',

    }

})

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
            isLogin: '',
            page: 1,
            refreshing: false,
            loading: false,
            category: '',
            isHidden: false
        }
    }

    getDataStory = () => {
        try {
            const getStory = async () => await Axios.get(`https://glints-redu.herokuapp.com/api/stories/paginate?page=${this.state.page}`, {
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            this.setState({ loading: true });

            getStory()
                .then(res => {
                    this.setState({
                        data: [...this.state.data, ...res.data.data.docs],
                        refreshing: false,
                        loading: false
                    })
                })
                .catch(err => {
                })
        } catch (e) { }
    }

    renderFooter = () => {
        if (!this.state.loading) return null;

        return (
            <View
                style={{
                    paddingVertical: 20,
                    borderTopWidth: 1,
                    borderColor: "#CED0CE"
                }}
            >
                <ActivityIndicator animating size="large" />
            </View>
        );
    }

    componentDidMount() {
        this.getDataStory()
        console.log(this.state.page)
        this.userIsSignIn()
        setInterval(this.userIsSignIn, 1000)
    }

    handleEnd = () => {
        this.setState(state => ({ page: state.page + 1 }), () => this.getDataStory());
    };

    userIsSignIn = async () => {
        const data = await AsyncStorage.getItem('@token')
        this.setState({ isLogin: data })
    }

    handleRefresh = () => {
        this.setState(
            {
                page: 1,
                refreshing: true,
                data: []
            },
            () => {
                this.getDataStory();
            }
        );
    };

    hideView = () => { this.setState({ isHidden: true }) }

    revealView = () => { this.setState({ isHidden: false }) }

    render() {

        if (this.state.isLogin !== 'null') {
            return (
                <Container style={{ backgroundColor: '#faffff' }}>
                    <Header1 />
                    <ScrollView
                        onScroll={this.hideView}
                        horizontal={true}
                        style={{
                            marginVertical: 10,
                        }}
                    >
                        <Button
                            small
                            bordered
                            rounded
                            style={styles.button1
                            }
                            onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'hutan' })}>
                            <Text>Hutan</Text>
                        </Button>
                        <Button
                            small
                            bordered
                            rounded
                            style={styles.button1
                            }
                            onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'kota' })}>
                            <Text>Kota</Text></Button>
                        <Button
                            small
                            bordered
                            rounded
                            style={styles.button1
                            }
                            onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'pantai' })}>
                            <Text>Pantai</Text></Button>
                        <Button
                            small
                            bordered
                            rounded
                            style={styles.button1
                            }
                            onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'sejarah' })}>
                            <Text>Sejarah</Text></Button>
                        <Button
                            small
                            bordered
                            rounded
                            style={styles.button1
                            }
                            onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'kota' })}>
                            <Text>Agama</Text></Button>
                    </ScrollView>
                    <FlatList
                        data={this.state.data}
                        renderItem={({ item }) => (
                            <View
                                key={item._id}
                                style={{ alignItems: 'center', justifyContent: 'center' }}>
                                <Card
                                    style={{
                                        marginVertical: 10,
                                        borderRadius: 200 / 12,
                                        width: Dimensions.get('window').width * 0.95,
                                    }}>


                                    <CardItem
                                        button
                                        onPress={() => this.props.navigation.navigate('StoryDetail', { id: item._id })}
                                        style={{ borderRadius: 200 / 12 }}>
                                        <Text
                                            style={{
                                                fontSize: 18,
                                                fontFamily: 'Roboto',
                                                fontWeight: 'bold',
                                                color: '#015249'
                                            }}
                                        > {item.title} </Text>
                                    </CardItem>


                                    <CardItem
                                        cardBody
                                        button
                                        onPress={() => this.props.navigation.navigate('StoryDetail', { id: item._id, photo: item._user.photo.secure_url })}
                                        style={{ marginHorizontal: 10 }}
                                    >
                                        <Image
                                            style={{
                                                width: '100%',
                                                height: 300,
                                                borderRadius: 200 / 12,
                                            }}
                                            source={{ uri: item.photo ? item.photo.secure_url : null }}
                                        />
                                    </CardItem>

                                    <CardItem
                                        button
                                        onPress={() => { this.props.navigation.navigate('UserDataById', { id: item._user._id }) }}
                                        style={{ borderRadius: 200 / 12 }}
                                    >
                                        <Left>
                                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                <Image
                                                    style={{
                                                        width: 25,
                                                        height: 25,
                                                        borderRadius: 25 / 2
                                                    }}
                                                    source={{ uri: item._user.photo.secure_url }}
                                                />
                                                <Text
                                                    style={{
                                                        fontSize: 15,
                                                        fontFamily: 'Roboto',
                                                        fontWeight: 'bold',
                                                    }}
                                                > {item._user.name} </Text>
                                            </View>
                                        </Left>
                                    </CardItem>


                                </Card>
                            </View>
                        )}
                        keyExtractor={item => item._id}
                        onEndReached={this.handleEnd}
                        onEndReachedThreshold={0.01}
                        onRefresh={this.handleRefresh}
                        refreshing={this.state.refreshing}
                        // ListHeaderComponent={this.renderHeader}
                        ListFooterComponent={this.renderFooter}
                    />
                    <Fab
                        style={{
                            backgroundColor: '#22cade',
                        }}
                        onPress={() => this.props.navigation.navigate('AddStory')}>
                        <Icon name="add" />
                    </Fab>


                </Container>

            )
        } else
            return (
                <Container style={{ backgroundColor: '#faffff' }}>
                    <Header1 />
                    <ScrollView
                        onScroll={this.hideView}
                        horizontal={true}
                        style={{
                            marginVertical: 10,
                        }}
                    >
                        <Button
                            small
                            bordered
                            rounded
                            style={styles.button1
                            }
                            onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'hutan' })}>
                            <Text>Hutan</Text>
                        </Button>
                        <Button
                            small
                            bordered
                            rounded
                            style={styles.button1
                            }
                            onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'kota' })}>
                            <Text>Kota</Text></Button>
                        <Button
                            small
                            bordered
                            rounded
                            style={styles.button1
                            }
                            onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'pantai' })}>
                            <Text>Pantai</Text></Button>
                        <Button
                            small
                            bordered
                            rounded
                            style={styles.button1
                            }
                            onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'sejarah' })}>
                            <Text>Sejarah</Text></Button>
                        <Button
                            small
                            bordered
                            rounded
                            style={styles.button1
                            }
                            onPress={() => this.props.navigation.navigate('StoryByCategory', { category: 'kota' })}>
                            <Text>Agama</Text></Button>
                    </ScrollView>
                    <FlatList
                        data={this.state.data}
                        renderItem={({ item }) => (
                            <View
                                key={item._id}
                                style={{ alignItems: 'center', justifyContent: 'center' }}>
                                <Card
                                    style={{
                                        marginVertical: 10,
                                        borderRadius: 200 / 12,
                                        width: Dimensions.get('window').width * 0.95,
                                    }}>


                                    <CardItem
                                        button
                                        onPress={() => this.props.navigation.navigate('StoryDetail', { id: item._id })}
                                        style={{ borderRadius: 200 / 12 }}>
                                        <Text
                                            style={{
                                                fontSize: 18,
                                                fontFamily: 'Roboto',
                                                fontWeight: 'bold',
                                                color: '#015249'
                                            }}
                                        > {item.title} </Text>
                                    </CardItem>


                                    <CardItem
                                        cardBody
                                        button
                                        onPress={() => this.props.navigation.navigate('StoryDetail', { id: item._id, photo: item._user.photo.secure_url })}
                                        style={{ marginHorizontal: 10 }}
                                    >
                                        <Image
                                            style={{
                                                width: '100%',
                                                height: 300,
                                                borderRadius: 200 / 12,
                                            }}
                                            source={{ uri: item.photo ? item.photo.secure_url : null }}
                                        />
                                    </CardItem>

                                    <CardItem
                                        button
                                        onPress={() => { this.props.navigation.navigate('UserDataById', { id: item._user._id }) }}
                                        style={{ borderRadius: 200 / 12 }}
                                    >
                                        <Left>
                                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                <Image
                                                    style={{
                                                        width: 25,
                                                        height: 25,
                                                        borderRadius: 25 / 2
                                                    }}
                                                    source={{ uri: item._user.photo.secure_url }}
                                                />
                                                <Text
                                                    style={{
                                                        fontSize: 15,
                                                        fontFamily: 'Roboto',
                                                        fontWeight: 'bold',
                                                    }}
                                                > {item._user.name} </Text>
                                            </View>
                                        </Left>
                                    </CardItem>


                                </Card>
                            </View>
                        )}
                        keyExtractor={item => item._id}
                        onEndReached={this.handleEnd}
                        onEndReachedThreshold={0.01}
                        onRefresh={this.handleRefresh}
                        refreshing={this.state.refreshing}
                        // ListHeaderComponent={this.renderHeader}
                        ListFooterComponent={this.renderFooter}
                    />
                </Container>)
    }
}
export default withNavigation(Home)