'use strict';

import React, {Component} from 'react';
import PropTypes from 'prop-types';

import {Dimensions, StyleSheet, Text, TouchableOpacity, View} from 'react-native';

export default class TabBottom extends Component {

    static propType = {
        goToPage: PropTypes.func,
        activeTab: PropTypes.number,
        tabs: PropTypes.array,
        tabNames: PropTypes.array,
        tabIconNames: PropTypes.array,
        selectedTabIconNames: PropTypes.array
    };

    componentDidMount() {
        this.props.scrollValue.addListener(this.setAnimationValue);
    }

    setAnimationValue({value}) {
        console.log(value);
    }

    render() {
        return (
            <View>
                <View style={styles.tabs}>
                    {this.props.tabs.map((tab, i) => {
                        let color = this.props.activeTab === i ? '#444444' : '#B0B0B0';
                        let fontWeight = this.props.activeTab === i ? 'bold' : 'normal';
                        return (
                            <TouchableOpacity key={i} activeOpacity={0.8} style={styles.tab} onPress={() => this.props.goToPage(i)}>
                                <View style={styles.tabItem}>
                                    <Text style={[styles.nameText, {
                                        color: color,
                                        fontWeight: fontWeight,
                                    }]}>{this.props.tabNames[i]}</Text>
                                </View>
                                {this.props.activeTab !== i ? null :
                                    <View style={{alignItems: 'center'}}>
                                        <View style={styles.underLine}/>
                                    </View>
                                }
                            </TouchableOpacity>
                        )
                    })}
                </View>
                <View style={styles.lineView}/>
            </View>
        );
    }
}

let {width} = Dimensions.get('window');


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        marginTop: 20
    },
    tabs: {
        flexDirection: 'row',
        height: 50,
        borderTopColor: '#FFFFFF',
        borderTopWidth: 1
    },
    tab: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabItem: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    nameText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        textAlign: 'center',
    },
    underLine: {
        width: 28,
        height: 2,
        backgroundColor: '#444444',
    },
    lineView: {
        width: width,
        height: 1,
        backgroundColor: '#e0e0e0'
    },
});