'use strict';

import React, {Component} from 'react';

import {StyleSheet, View} from "react-native";
import HomeContainer from './HomeContainer';
import DataContainer from './DataContainer';
import MessageContainer from './MessageContainer';
import MineContainer from './MineContainer';
import TabBottom from '../components/TabBottom';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import ReactNative from "react-native";

const tabTitles = ['有货推手', '佣金', '消息', '我的'];

//默认图标
const tabIcon = [
    require('../images/unselect_home.png'),
    require('../images/unselect_data.png'),
    require('../images/unselect_message.png'),
    require('../images/unselect_mine.png'),
];

//选中图标
const tabSelectedIcon = [
    require('../images/select_home.png'),
    require('../images/select_data.png'),
    require('../images/select_message.png'),
    require('../images/select_mine.png'),
];


class TabContainer extends Component {
    render() {
        return (
            <View style={styles.container}>
                <ScrollableTabView
                    tabBarPosition='bottom'
                    locked={true}
                    scrollWithoutAnimation={true}
                    renderTabBar={() => <TabBottom
                        tabIconNames={tabIcon}
                        selectedTabIconNames={tabSelectedIcon}/>}
                        onChangeTab={(obj) => {
                            let params = {
                                TAB_ID: obj.i + 1
                            };
                            ReactNative.NativeModules.YH_CommonHelper.logEvent('YB_CPS_MAIN_TAB_C', params);
                            ReactNative.NativeModules.YH_CommonHelper.allianceUpdateTitle(tabTitles[obj.i]);
                        }
                    }
                >
                    <HomeContainer/>
                    <DataContainer/>
                    <MessageContainer/>
                    <MineContainer/>
                </ScrollableTabView>
            </View>
        )
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

export default TabContainer;