
/**
 * 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, 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/star/chatInput/chatInputContainer';
import styles from './style';
let scrollView: ScrollView | null
interface BreezeScreenViewProps {
    toogleFabIcon: (item: any) => void
    textChange: (item: any) => void
    goBack: () => void
    openSideMenu: () => void
    addChat: () => void
    userDetails: any
    chatInput: string
    cameraToggle: boolean
    shareToggle: boolean,
    searchToggle: boolean,
    chatMessage: any
    cameraGallery: any
    shareAvatar: any
    keyboardOffset: any
}
const BreezeScreenView = (props: BreezeScreenViewProps) => {
    return (
        <Container style={styles.container}>
            <Header style={[styles.headerSection, styles.headerColorSection]} >
                <Left style={styles.headerLeftSection}>
                    <Button transparent onPress={props.goBack}>
                        <Icon name='arrow-back' style={styles.backIcon} />
                        <Thumbnail source={props.userDetails.image} style={styles.userImage} />
                        <View style={styles.activeIcon} />
                    </Button>
                </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 onPress={() => props.toogleFabIcon('cameraToggle')} style={styles.iconButtonSection} >
                        <Icon name="camera" style={[styles.iconSize, props.cameraToggle ? styles.fabColorWhite : styles.fabColorGrey]} />
                    </Button>
                    <Button transparent onPress={() => props.toogleFabIcon('shareToggle')} style={styles.iconButtonSection} >
                        <Icon name="share-alt" style={[styles.iconSize, props.shareToggle ? styles.fabColorWhite : styles.fabColorGrey]} />
                    </Button>
                    <Button androidRippleColor="true" transparent onPress={() => props.toogleFabIcon('searchToggle')} style={styles.iconButtonSection} >
                        <Icon name="search" style={[styles.iconSize, props.searchToggle ? styles.fabColorWhite : styles.fabColorGrey]} />
                    </Button>

                </Right>

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

                </View>
            }
            {props.shareToggle &&
                <View style={[styles.headerColorSection, styles.shareParentSection]}>
                    <ScrollView horizontal >
                        {props.shareAvatar.map((user: any, key: number) => <View key={key}><Thumbnail square small 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 style={styles.searchBarSection}>
                            <Icon name="ios-search" />
                            <Input placeholder="Type to Search" />
                        </Item>
                    </View>
                </View>
            }
            <KeyboardAvoidingView style={styles.KeyboardAvoidingView} keyboardVerticalOffset={props.keyboardOffset}>
                <ScrollView
                    ref={ref => scrollView = ref} onContentSizeChange={() => {
                        scrollView ? scrollView.scrollToEnd({ animated: true }) : null;
                    }}
                >

                    <Content style={styles.chatContentSection} scrollEnabled   >
                        <View style={styles.messageWrap} >
                            {props.chatMessage.map((chat: { userId: string; time: React.ReactNode; message: React.ReactNode; }, key: string | number | undefined) => {
                                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>)
                                } else {
                                    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>
    )
};

export default BreezeScreenView;
