import React, { Component } from "react"
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

import Icon from '../item/icon'

interface State {
}

interface Prop {

    tabs: any
    activeTab: any
    goToPage: Function
    pageThat:any

    styleActiveText: any
    styleActiveIcon: any
    styleNormalIcon: any
    styleNormalText: any
    styleBaseBox:any
}


export default class extends Component<Prop, State>{

    tabIcons = []

    constructor(props: Prop) {
        super(props);



    }


    render() {
        return <View style={this.props.styleBaseBox}>
            {this.props.tabs.map((tab, i) => {
                return <TouchableOpacity style={styles.touch} key={i} onPress={() =>{ this.props.goToPage(i)}} >
                    <View style={[styles.item]}>
                        <Icon
                            style={this.props.activeTab === i ? this.props.styleActiveIcon : this.props.styleNormalIcon}
                            pName={tab.iconName}
                            ref={(icon) => { this.tabIcons[i] = icon; }}
                        />
                        <Text style={this.props.activeTab === i ? this.props.styleActiveText : this.props.styleNormalText}>{tab.tabTitle}</Text>
                    </View>
                </TouchableOpacity>;
            })}
        </View>;
    }


}

const styles = StyleSheet.create({
    touch: {
        flex: 1,


    },
    item: {
        flex: 1,

        alignItems: 'center',
        justifyContent: 'center',

    },

    
});