// withHooks
// noPage
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';

import { EventBadge } from 'esoftplay/cache/event/badge/import';
import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
import { LibCurl_view } from 'esoftplay/cache/lib/curl_view/import';
import React, { useEffect } from 'react';
import { Pressable, Text, TouchableOpacity, View } from 'react-native';


export interface EventHeader_homeProps {
  title?: string,
  subtitle?: string,
  cart?: boolean,
  // card?:
  // onPress?: () => void
  onPress: () => void

}

export default function m(props: EventHeader_homeProps): any {
  // const chatHistory = ChattingHistory?.()
  // const data = chatHistory?.data

  useEffect(() => {
    // setUnread(data && data?.filter?.((v: any) => v.read == 0 && user && user?.id !== v.user_id).length || 0)
  }, [])

  return (
    <View>
      <View style={{ marginTop: LibStyle.STATUSBAR_HEIGHT }} />
      <LibStatusbar style="dark" />
      <View style={{ flexDirection: 'row', padding: 13, alignItems: 'center', height: 60, }} >
        <Pressable testID='profile' hitSlop={{ top: 7, left: 7, right: 7, bottom: 7 }} onPress={() => {
          EventIndexProperty.isLogin(() => {
            LibNavigation.navigate('user/profile')
          })
        }} style={{ height: 35, width: 35, borderRadius: 17.5, overflow: 'hidden' }} >
          <LibCurl_view
            url='v2/user_image'
            cache
            isUserData
            onSuccess={(res, msg) => {
              return (
                <LibPicture style={{ height: 35, width: 35, borderRadius: 17.5, backgroundColor: '#fff' }} source={res} />
              )
            }}
            onError={(err) => {
              return (
                <LibPicture style={{ height: 35, width: 35, borderRadius: 17.5, backgroundColor: '#fff' }} source={esp.assets('icons/ic_btm_nav_active_profile.png')} />
              )
            }}
            onLoading={<View />}
          />
        </Pressable>
        {
          props.title ?
            <View style={{ marginHorizontal: 11, flex: 1 }} >
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#70472b" }} >{props.title || esp.lang("event/header_home", "myprofile")}</Text>
              {props.subtitle && <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, letterSpacing: 0, color: "#e5e5e5", marginTop: 3 }} >{props.subtitle}</Text>}
            </View>
            :
            <TouchableOpacity testID='search-bar' onPress={() => props.onPress()} style={{ flex: 1 }} >
              <View style={{ marginLeft: 15, height: 20, borderRadius: 20, backgroundColor: 'white', flexDirection: "row", alignItems: 'center', flex: 1, marginHorizontal: 12 }} >
                <LibPicture style={{ height: 15, width: 15, marginLeft: 6, marginRight: 6 }} source={esp.assets('icons/ic_search.png')} />
                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, color: "#e5e5e5" }} >{esp.lang("event/header_home", "search")}</Text>
              </View>
            </TouchableOpacity>
        }
        <Pressable hitSlop={{ top: 7, left: 7, right: 7, bottom: 7 }} onPress={() => {
          EventIndexProperty.isLogin(() => {
            LibNavigation.navigate('notification/index')
          })
        }}>
          <View style={{ marginRight: 5, padding: 4 }}>
            <LibPicture style={{ height: 22, width: 27, resizeMode: 'contain' }} source={esp.assets('icons/home/notification.png')} />
            <LibCurl_view
              url='v2/notification_count'
              cache
              isUserData
              onSuccess={(res, msg) => {
                return (
                  <EventBadge counter={res} />
                )
              }}
              onError={(err) => {
                return (
                  <View />
                )
              }}
              onLoading={<View />}
            />
          </View>
        </Pressable>

      </View>
    </View>
  )
}