Untitled

// @ts-ignore
// @ts-nocheck
import { View, Text, TouchableOpacity, Image } from "react-native";
import React, { useEffect, useState } from "react";
import Apptheme from "../../blocks/HamburgerMenu/src/Apptheme";
import Scale from "./Scale";
import StorageProvider from "../../framework/src/StorageProvider"
import styles from "./bottomStyle";
import CreatePostModal from "./CreatePostModal";
import { SvgXml } from 'react-native-svg';
import {
  ActionCable,
  Cable,
} from '@kesha-antonov/react-native-action-cable'

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

interface Props {
  navigation: any;
  onRefresh: () => any;
  onCreatePost: (value: any) => any;
  showCreatepost: boolean;
  selectedTab: string;
  testID: any;
  testrefresh: string;
}
export default function CustomBottomBar(props: Props) {
  const { navigation, onRefresh } = props;
  const [showCreatepost, setShowCreatePost] = useState<boolean>(props.showCreatepost);
  const [count, setCount] = useState(10)
  const [time_count, setTime_count] = useState(0)
  const [time, setTime] = useState(false)
  const [cableCon, setcableCon] = useState('')


  useEffect(() => {
    _checkActionCableConnection()
  },[]);

  const _checkActionCableConnection = async()=> {
    console.log('conacole from custom bottom bar')
    const token = await StorageProvider.get('USER_TOKEN')
    const link = 'vibesocialmusic-82830-ruby.b82830.dev.us-east-1.aws.svc.builder.cafe'
    const actionCable = ActionCable.createConsumer(`wss://${link}/cable?token=${token}`)
    const cable = new Cable({})
  
    const channel = cable.setChannel(
      `UnreadCountsChannel`, // channel name to which we will pass data from Rails app with `stream_from`
      actionCable.subscriptions.create({
        channel: 'UnreadCountsChannel', // from Rails app app/channels/chat_channel.rb
      
      })
    )

    setcableCon(cable)

    
    channel
      .on( 'received', handleReceived )
      .on( 'connected', handleConnected )
      .on( 'rejected', handleDisconnected )
      .on( 'disconnected', handleDisconnected )
  }
  const handleConnected = async(handleConnected:any) => {
    // console.log( 'Connected',handleConnected)
    cableCon.channel('UnreadCountsChannel').perform('unread_messages_count')
  }
  const handleReceived = async(handleReceived:any) => {
    if (handleReceived.unread_messages_count != count) {
      console.log('count')
      setCount(handleReceived.unread_messages_count)
      
    }
    console.log( 'handleReceived',handleReceived)
  }
  const handleDisconnected = async () => {
    console.log( 'handleDisconnected')
  }
 


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

            <SvgXml xml={props?.selectedTab == "Chats" ? chatFill : chatPlain} width={Scale(24)} height={Scale(24)} />
            {count > 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}}>{count ? (count > 99 ? 99:count ) : 0 }</Text>
                    {count > 99 ? 
                      <SvgXml xml={plusIcon} width={Scale(4)} height={Scale(4)} style={{ alignItems: 'center', marginBottom:Scale(5) }}/>
                    :null}
                   
              </View>
   
             
           
            </View>
          :null}
          </TouchableOpacity>
          <TouchableOpacity
         
            onPress={() => {

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

            <SvgXml xml={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={() => {

              navigation.navigate("Notifications")
            }}
            style={styles.touchablestyle}
          >
          

            <SvgXml xml={props?.selectedTab === 'Notifications' ? notificationfill : notificationPlain} width={Scale(24)} height={Scale(24)} />
            {count > 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}}>{count ? (count > 99 ? 99:count ) : 0 }</Text>
                    {count > 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={props.testrefresh}
           onPress={() => {
          navigation.navigate("FeedBlock", { index:1 })
          //  navigation.navigate("FeedBlock")
          timerCountFun()
            onRefresh()
          }}
            style={styles.touchablestyle}>

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