// withHooks
// noPage
import esp from 'esoftplay/esp';

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 { MarketBadge } from 'esoftplay/cache/market/badge/import';
import { MarketCartProperty } from 'esoftplay/cache/market/cart/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import { UserNotification } from 'esoftplay/cache/user/notification/import';

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';



export interface MarketHeader_homeArgs {

}
export interface MarketHeader_homeProps {

}
export default function m(props: MarketHeader_homeProps): any {

  const userImage = UserClass.state()?.get?.()?.image
  const counter = UserNotification.state().useSelector(s => s.unread)
  const [cartCount] = MarketCartProperty.countState().useState()
  // const [unRead, setUnread] = ChatIndexProperty.unreadState().useState()

  return (
    <View>
      <View style={{ marginTop: LibStyle.STATUSBAR_HEIGHT }} />
      <LibStatusbar style="dark" />
      <View style={{ flexDirection: 'row', padding: 13, alignItems: 'center', height: 60 }} >
        <TouchableOpacity onPress={() => {
        }} >
          <LibPicture style={{ height: 30, width: 30, borderRadius: 15, backgroundColor: '#fff' }} source={userImage && userImage != '' ? { uri: userImage } : esp.assets('market/ic_btm_nav_active_profile.png')} />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => { /* LibNavigation.navigate('search/index')  */ }} 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('market/ic_search.png')} />
            <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, color: "#e5e5e5" }} >{esp.lang("market/header_home", "text_search")}</Text>
          </View>
        </TouchableOpacity>
        {
          // esp.isDebug() && // #publish_market
          <TouchableOpacity onPress={() => {
          }}>
            <View style={{ marginRight: 5, padding: 4 }}>
              <LibPicture style={{ height: 22, width: 27, resizeMode: 'contain' }} source={esp.assets('market/cart.png')} />
              <MarketBadge counter={cartCount} />
            </View>
          </TouchableOpacity>
        }
        <TouchableOpacity onPress={() => {
        }}>
          <View style={{ marginRight: 5, padding: 4 }}>
            <LibPicture style={{ height: 22, width: 27, resizeMode: 'contain' }} source={esp.assets('market/notification.png')} />
            <MarketBadge counter={counter} />
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {
        }}>
          <View style={{ marginRight: 5, padding: 4 }}>
            <LibPicture style={{ height: counter > 99 ? 27 : 22, width: counter > 99 ? 27 : 22, resizeMode: 'contain' }} source={esp.assets('market/chat.png')} />
            {/* <MarketBadge counter={unRead} /> */}
            <MarketBadge counter={0} />
          </View>
        </TouchableOpacity>

      </View>

    </View>
  )
}