/**
 * 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 from 'react';
import {
    Container, Header, TabHeading, Left, Body, Badge,
    Right, Button, Icon, Title, Item, Input, Text, Tab, Tabs,
    ScrollableTab,
} from 'native-base';
import WhatsAppChatContainer from '../../../../components/chatter/whatsapp/chats/whatsappchatContainer';
import WhatsAppCallContainer from '../../../../components/chatter/whatsapp/calls/whatsappcallContainer';
import WhatsAppContactContainer from '../../../../components/chatter/whatsapp/contacts/whatsappcontactContainer';
import styles from './styles';


const WhatsappListView = (props: any) => {
    return (
        <Container style={styles.container}>
            <Header style={[styles.header, styles.headerSection]} >
                <Left>
                    <Button transparent onPress={props.openSideMenu} >
                        <Icon name='menu' style={styles.icon} />
                    </Button>
                </Left>
                <Body>
                    {props.searchIcon &&
                        <Item rounded>
                            <Input placeholder='Rounded Textbox' />
                        </Item>
                    }
                    {!props.searchIcon &&
                        <Title style={styles.themeTextColor}>{props.headerTitle}{props.searchIcon}</Title>
                    }

                </Body>
                <Right>
                    <Button transparent >
                        <Icon name='search' style={styles.icon} />
                    </Button>
                    <Button transparent>
                        <Icon name='more' style={styles.icon} />
                    </Button>
                </Right>
            </Header>

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

                <Tab heading={<TabHeading style={[styles.tabStyle]}><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}>CONTACTS</Text></TabHeading>} >
                    <WhatsAppContactContainer />
                </Tab>
            </Tabs>
        </Container>
    );
}

export default WhatsappListView;
