import React from 'react';
import { StyleSheet, View, ImageBackground, Dimensions, ScrollView, FlatList, ActivityIndicator, TouchableOpacity, Text } from 'react-native';
import ProductDetail from '../components/ProductDetail';
import BannerProduct from '../components/BannerProduct';
import SizeSelector from '../components/SizeSelector';
import ColorSelector from '../components/ColorSelector';
import Product from '../components/Product';
import firebase from '../enviroments/Firebase'
import { StackActions } from 'react-navigation';
import BottomButton from '../components/BottomButton';
import ProductAddContainer from '../containers/ProductAddContainer';
import {createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';

class ProductDetailContainer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            isLoading2: true,
            imageProduct: [],
            popularProducts: [],
        }
        this.refPopular = firebase.firestore().collection('fl_content')
                                .where('_fl_meta_.schema','==','product')
                                .where('popular','==','1');
        this.unsubscribePopular = null;
    }

    componentDidMount() {
        //this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
        const imageProduct = []
        this.unsubscribePopular = this.refPopular.onSnapshot(this.onCollectionUpdatePopular);
        this.props.screenProps.ref.get().then( (fileDoc) => {
            const fileStorage = fileDoc;
            const file_name =  fileStorage.data().file;
            const urlImg = "flamelink/media/" + file_name;
            let refImg = firebase.storage().ref(urlImg);

            refImg.getDownloadURL().then((urlDownload) => {
                imageProduct.push(urlDownload)
                this.setState({
                    imageProduct : imageProduct,
                    isLoading: false
                })

            });

        })
        this.props.screenProps.doc.data().categoryProduct[0].get().then( (categoryDoc) => {
            //console.log(categoryDoc)
            this.setState({
                category: categoryDoc.data()
             });
        })
    }
    onCollectionUpdatePopular =   (querySnapshot) => {
        const popularProducts = [];
        querySnapshot.forEach((doc) => {
            const { name, description, price } = doc.data();
            //console.log(doc.data())
            const ref =  doc.data().imageCover[0]

            popularProducts.push({
                id: doc.id,
                doc, // DocumentSnapshot
                name,
                description,
                price,
                ref
            });
        });
        this.setState({
            popularProducts,
            isLoading2: false,
        });
    }

    handleRefresh() {
        this.setState(
          {
                isLoading2: true,
        },
          () => {
                this.unsubscribePopular = this.refPopular.onSnapshot(this.onCollectionUpdatePopular);
            });
    }


    render() {
        const { imageProduct } = this.state
        const { isLoading2, popularProducts } = this.state;
        const {navigate} = this.props.navigation;



        return (
            <ImageBackground
                source={require('../assets/images/bg.png')}
                style={styles.bg}
            >

                <View style={styles.wrapper}>
                    <View style={styles.container}>
                        <ScrollView
                            ref='_scrollView'
                            contentContainerStyle={styles.contentContainer}>
                            <BannerProduct imageProduct={imageProduct}/>
                            <View style={styles.top}>
                                <ProductDetail product={this.props.screenProps} />
                            </View>
                            <View
                                style={[styles.top, styles.marginTop20, styles.marginHorizontal25]}
                                >
                                <Text>Produk Rekomendasi</Text>
                            </View>
                            <View style={styles.top}>
                                {/* <SizeSelector product={this.props.navigation.state.params.product} /> */}
                                {
                                    !isLoading2 ?
                                        <View style={[styles.paddingHorizontal10,styles.top]}>

                                            <ScrollView horizontal={true}
                                                showsHorizontalScrollIndicator={false}
                                                contentContainerStyle={styles.contentContainerHorizontal}>
                                                <FlatList
                                                    horizontal={true}
                                                    data={popularProducts}
                                                    renderItem={({ item }) =>
                                                        <TouchableOpacity onPress={() => {
                                                            const pushAction = StackActions.push({
                                                                routeName: 'ProductDetail',
                                                                params: {
                                                                    product: item,
                                                                },
                                                            });
                                                            //this.refs._scrollView.scrollTo({x:0,y:0,animated:false});
                                                            this.props.navigation.dispatch(pushAction)
                                                        }}>
                                                            <Product product={item} />
                                                        </TouchableOpacity>}
                                                    keyExtractor={item => item.id}
                                                    refreshing={this.state.isLoading2}
                                                    onRefresh={this.handleRefresh.bind(this)}
                                                />
                                            </ScrollView>
                                        </View> :
                                        <View style={[styles.containerLoad, styles.horizontalLoad]}>
                                            <ActivityIndicator size="large" color="#3498db" />
                                        </View>
                                }
                            </View>
                            {/* <View style={[styles.top, styles.marginTop20]}>
                                <ColorSelector product={this.props.navigation.state.params.product} />
                            </View> */}
                        </ScrollView>



                    </View>
                </View>
                <View style={styles.navbar}>
                    <BottomButton navigate={this.props.navigation.navigate}  product={this.props.screenProps} />
                </View>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    navbar: {
        flex:1,
    },
    paddingHorizontal10:{
        paddingHorizontal:10
    },
    marginHorizontal25: {
        marginHorizontal: 25
    },
    bg: {
        flex: 1,
        resizeMode: 'cover',
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height
    },
    top: {

        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    marginTop20:{
        marginTop: 20
    },
    wrapper: {
        flex: 7
    },
    contentContainer: {
        paddingBottom: 50
    },
});

//export default ProductDetailContainer;


const AppNavigator = createStackNavigator({
    ProductDetail: {
        screen:ProductDetailContainer,
        navigationOptions: ({ navigation, screenProps  }) => {
            //console.log(screenProps )
            return {
                tabBarVisible: false,
                title: screenProps.name,
                headerStyle: {
                    elevation: 0,       //remove shadow on Android
                    shadowOpacity: 0,   //remove shadow on iOS
                    borderBottomWidth: 0.5
                },
            }

        }
    },
    ProductAddContainer: {
        screen: ProductAddContainer,
    }
});


const BottomContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {

    render() {

        return (
            <BottomContainer screenProps={this.props.navigation.state.params.product}/>

        )
    }

}