/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React, { Component } from 'react';
import {
    Container,
    TabHeading,
    Badge,
    Text,
    Tab,
    Tabs,
    ScrollableTab,
} from 'native-base';
import WhatsAppChatContainer from '../../../../components/star/whatsapp/chats/whatsappchatContainer';
import WhatsAppCallContainer from '../../../../components/star/whatsapp/calls/whatsappcallContainer';
import WhatsAppContactContainer from '../../../../components/star/whatsapp/contacts/whatsappcontactContainer';
import styles from './styles';


const WhatsappListView = (props: any) => {
    return (
        <Container style={styles.container}>


            <Tabs tabBarUnderlineStyle={styles.tabBarUnderlineStyle} renderTabBar={() => <ScrollableTab style={[styles.header]} />}>
                <Tab heading={<TabHeading style={[styles.tabStyle, styles.themeTextColor]}><Text style={styles.themeTextColor}>CALLS</Text></TabHeading>}>
                    <WhatsAppCallContainer />
                </Tab>

                <Tab heading={<TabHeading style={[styles.tabStyle, styles.themeTextColor]}><Text style={styles.themeTextColor}>CHATS</Text><Badge style={styles.badgeStyle}><Text style={styles.badgesText}>{props.unreadMessage}</Text></Badge></TabHeading>} >
                    <WhatsAppChatContainer />
                </Tab>
                <Tab heading={<TabHeading style={styles.tabStyle}><Text style={styles.themeTextColor}>MATCHES</Text></TabHeading>} >
                    <WhatsAppContactContainer />
                </Tab>
            </Tabs>
        </Container>
    );
}

export default WhatsappListView;
