Untitled

// Customizable Area Start
// @ts-nocheck
// @ts-ignore
import React from 'react'
import {
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import styles from "./bottomStyle";

import CustomBottomBarClassController, { Props } from './CustomBottomBarClassController'
import Scale from "./Scale";


import CreatePostModal from "./CreatePostModal";
import { SvgXml } from 'react-native-svg';


import { add, 
  chatFill, 
  chatPlain,
  notificationPlain, 
 profileFill,
   profilePlain, 
   vFill, 
   vPlain } from "../../blocks/HamburgerMenu/src/assets";
import { FONTS } from "framework/src/AppFonts";
import Apptheme from '../../blocks/HamburgerMenu/src/Apptheme';


class CustomBottomBarClass extends CustomBottomBarClassController {
  constructor(props: Props) {
    super(props)
   
  }

 




  render() {
    const { showTrending, showStory } = this.state
    return (
      <>
       <View>
      <View
        style={[
          styles.smallCard2
        ]}
      >
        <View
          style={{
            width: "100%",
            paddingHorizontal: Scale(25),
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems:'center',
          }}
        >
          <TouchableOpacity
          testID={this.props.testID}
            onPress={() => {
              this.props.navigation.navigate("ChatListScreen")
            }}
            style={styles.touchablestyle}
          >

            <SvgXml xml={this.props?.selectedTab == "Chats" ? chatFill : chatPlain} width={Scale(24)} height={Scale(24)} />
            {this.context.MessageCount > 0 ?
            <View style={{
              borderWidth:3,
              borderColor:'#17161F',
              height:Scale(22),
              width:Scale(22),
              padding: Scale(10),
              borderRadius:100,
              position: 'absolute', 
              left: Scale(10),
              justifyContent:'center',
              alignItems:'center',
            
              bottom: Scale(10)}}>
                <View style={{height:Scale(22),
              width:Scale(22),backgroundColor:Apptheme.getartisttextcolor(),
              borderRadius:100, justifyContent:'center',
              alignItems:'center',flexDirection:'row'}}>
                    <Text style={{color:'white',fontSize:Scale(12),fontFamily:FONTS.AppleSymbols,letterSpacing: 1}}>{this.context.MessageCount ? (this.context.MessageCount > 99 ? 99:this.context.MessageCount ) : 0 }</Text>
                    {this.context.MessageCount > 99 ? 
                      <SvgXml xml={plusIcon} width={Scale(4)} height={Scale(4)} style={{ alignItems: 'center', marginBottom:Scale(5) }}/>
                    :null}
                   
              </View>
   
             
           
            </View>
          :null}
          </TouchableOpacity>
          <TouchableOpacity
         
            onPress={() => {

              this.props.navigation.navigate("MyProfile")
            }}
            style={styles.touchablestyle}
          >

            <SvgXml xml={this.props?.selectedTab == 'MyProfile' ? profileFill : profilePlain} width={Scale(24)} height={Scale(24)} />
          </TouchableOpacity>
          <TouchableOpacity

            onPress={() => {
              props.onCreatePost(true)
              setShowCreatePost(true)
            }
            }
            style={styles.touchablestyle}
          >
            <SvgXml xml={add} width={Scale(32)} height={Scale(32)} />

          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {

              this.props.navigation.navigate("Notifications")
              this.context.MessageCountData(0)
            }}
            style={styles.touchablestyle}
          >
          

            <SvgXml xml={this.props?.selectedTab === 'Notifications' ? notificationfill : notificationPlain} width={Scale(24)} height={Scale(24)} />
            
            {this.context.MessageCount > 0 ?
            <View style={{
              borderWidth:3,
              borderColor:'#17161F',
              height:Scale(22),
              width:Scale(22),
              padding: Scale(10),
              borderRadius:100,
              position: 'absolute', 
              left: Scale(10),
              justifyContent:'center',
              alignItems:'center',
            
              bottom: Scale(10)}}>
                <View style={{height:Scale(22),
              width:Scale(22),backgroundColor:Apptheme.getartisttextcolor(),
              borderRadius:100, justifyContent:'center',
              alignItems:'center',flexDirection:'row'}}>
                    <Text style={{color:'white',fontSize:Scale(12),fontFamily:FONTS.AppleSymbols,letterSpacing: 1}}>{this.context.MessageCount ? (this.context.MessageCount > 99 ? 99:this.context.MessageCount ) : 0 }</Text>
                    {this.context.MessageCount > 99 ? 
                      <SvgXml xml={plusIcon} width={Scale(4)} height={Scale(4)} style={{ alignItems: 'center', marginBottom:Scale(5) }}/>
                    :null}
                   
              </View>
   
             
           
            </View> 
          :null}
          </TouchableOpacity>
          <TouchableOpacity
          // disabled={time}
          testID={this.props.testrefresh}
           onPress={() => {
          this.props.navigation.navigate("FeedBlock", { index:1 })
          //  navigation.navigate("FeedBlock")

            onRefresh()
          }}
            style={styles.touchablestyle}>

            <SvgXml xml={(this.props?.selectedTab === 'Feed' && this.props?.tab === false ) ? vFill : vPlain} width={Scale(19)} height={Scale(24)} />
          </TouchableOpacity>
        </View>
      </View>
      <CreatePostModal
        navigation={this.props.navigation}
        showCreatepost={false}
        onDismiss={() => {
          setShowCreatePost(false);
          this.props.onCreatePost(false);
        }}
        onRequestClose={() => {
          setShowCreatePost(false);
          this.props.onCreatePost(false);
        }}
        onDah={() => {
          setShowCreatePost(false);
          this.props.onCreatePost(false);
        }}
      />
    </View>
      </>

    )
  }
}


export default CustomBottomBarClass;
// Customizable Area End