'use strict';

import React, {Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Dimensions,
    ActivityIndicatorIOS,
    Platform,
    ProgressBarAndroid,
} from 'react-native';

export default class LoadMoreIndicator extends Component {

    renderFooter() {
        if (this.props.hidden) {
            return <View/>;
        }else {
            if (Platform.OS === 'android') {
                return (
                    <View style={styles.footerContainer}>
                        {this.props.animating ?
                            <ProgressBarAndroid style={styles.footerIndicator} styleAttr={'SmallInverse'} /> :
                            null}

                        <Text style={styles.footerText}>{this.props.loadingText}</Text>
                    </View>
                )
            } else {
                return (
                    <View style={styles.footerContainer}>
                        {this.props.animating ?
                            <ActivityIndicatorIOS style={styles.footerIndicator} size={'small'} /> :
                            null}

                        <Text style={styles.footerText}>{this.props.loadingText}</Text>
                    </View>
            )
            }
        }
    }

    render() {
        return(
            this.renderFooter()
        );
    }
}

const styles = StyleSheet.create({
    footerContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        height: 44,
    },
    footerIndicator: {
        // marginTop: 15,
        // marginLeft: Dimensions.get('window').width/2-50,
        // marginRight: 10,
    },
    footerText: {
        marginLeft: 10,
        textAlign: 'center',
        color:'#b1b1b1',
    },
});