/**
 * 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, Left, Thumbnail, Body, Text,
    H3, Right, Icon, View, Button, Item, Input, Content, Footer,
} from 'native-base';
import { ScrollView, KeyboardAvoidingView } from 'react-native';
import ChatInputContainer from '../../../../components/chatter/chatInput/chatInputContainer';
import styles from './style';

let scrollView: ScrollView | null

const BreezeScreenView = (props: any) => {
    return (
        <Container style={styles.container}>
            <Header style={[styles.headerSection, styles.headerColorSection]} >
                <Left style={styles.headerLeftSection}>
                    <View>
                        <Thumbnail circular source={props.userDetails.image} style={styles.userImage} />
                        <View style={styles.activeIcon} />
                    </View>
                </Left>
                <Body style={styles.headerBodySection}>
                    <H3 style={styles.firstName}>{props.userDetails.firstName} {props.userDetails.lastName}</H3>
                    <Text style={styles.userStatus}>{props.userDetails.status}</Text>
                </Body>
                <Right style={styles.headerRightSection}>
                    <Button transparent={true} onPress={() => props.toogleFabIcon('cameraToggle')} >
                        <Icon name='camera' style={[styles.iconSize, props.cameraToggle ? styles.fabColorWhite : styles.fabColorGrey]} />
                    </Button>
                    <Button transparent={true} onPress={() => props.toogleFabIcon('shareToggle')} >
                        <Icon name='share-alt' style={[styles.iconSize, props.shareToggle ? styles.fabColorWhite : styles.fabColorGrey]} />
                    </Button>
                    <Button androidRippleColor='true' transparent={true} onPress={() => props.toogleFabIcon('searchToggle')}>
                        <Icon name='search' style={[styles.iconSize, props.searchToggle ? styles.fabColorWhite : styles.fabColorGrey]} />
                    </Button>

                </Right>

            </Header>
            {props.cameraToggle &&
                <View style={[styles.headerColorSection]}>
                    <ScrollView horizontal={true}>
                        {props.cameraGallery.map((imageUrl: any, key: number) => <Thumbnail square={true} large={true} key={key} source={imageUrl} style={styles.cameraGallerySection} />)}
                    </ScrollView>

                </View>
            }
            {props.shareToggle &&
                <View style={[styles.headerColorSection, styles.shareParentSection]}>
                    <ScrollView horizontal={true} >
                        {props.shareAvatar.map((user: any, key: number) => <View key={key}><Thumbnail square={true} small={true} source={user.image} style={styles.shareAvatarSection} /><Text style={styles.shareAvatarName}> {user.name}</Text></View>)}
                    </ScrollView>

                </View>
            }
            {props.searchToggle &&
                <View style={[styles.headerColorSection, styles.searchParentSection]}>
                    <View>
                        <Item rounded={true} style={styles.searchBarSection}>
                            <Icon name='ios-search' />
                            <Input placeholder='Type to Search' />
                        </Item>
                    </View>
                </View>
            }
            <KeyboardAvoidingView style={styles.KeyboardAvoidingView}>
                <ScrollView
                    // eslint-disable-next-line no-return-assign
                    ref={ref => scrollView = ref} onContentSizeChange={() => {
                        scrollView ? scrollView.scrollToEnd({ animated: true }) : null;
                    }}
                >
                    <Content style={styles.chatContentSection} scrollEnabled={true} >
                        <View style={styles.messageWrap} >
                            {/*---Left Section--- */}
                            {props.chatMessage.map((chat: any, key: number) => {
                                if (chat.userId === 'Aditya') {
                                    return (<View style={[styles.messageLeftParent]} key={key}>
                                        <View style={styles.messageLeftTime}>
                                            <Text style={styles.leftTimeTextSection} >{chat.time}</Text>

                                        </View>
                                        <View style={[styles.messageLeftChatSection]} key={key}>
                                            <Text style={styles.messageLeftText}>{chat.message}</Text>
                                        </View>
                                    </View>);
                                    // eslint-disable-next-line no-else-return
                                }
                                return (<View style={styles.messageRightParent} key={key}>
                                    <View style={styles.messageRightTime}>
                                        <Text style={styles.rightTimeTextSection} >{chat.time}</Text>
                                    </View>
                                    <View style={styles.messageRightChatSection} key={key}>
                                        <Text style={styles.messageRightText}>{chat.message}</Text>
                                    </View>
                                </View>
                                );

                            },

                            )}

                        </View>

                    </Content>

                </ScrollView>
                <Footer style={styles.footerSection}>
                    <ChatInputContainer updateData={props.addChat} textChange={(event: any) => props.textChange(event)} chatInput={props.chatInput} />
                </Footer>
            </KeyboardAvoidingView>

        </Container>
        // </SafeAreaView>
    );
};

export default BreezeScreenView;
