// withHooks

import { EventBadge } from 'esoftplay/cache/event/badge/import';
import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
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 { UserNotification } from 'esoftplay/cache/user/notification/import';
import esp from 'esoftplay/esp';
import React, { useRef } from 'react';
import { Text, TextInput, TouchableOpacity, View } from 'react-native';


export interface EventHeaderArgs {

}
export interface EventHeaderProps {
  doSearch?: (query: string) => void,
  onChangeText?: (query: string) => void,
  searchPlaceholder?: string,
  title?: string,
  titleColor?: string,
  subtitle?: string,
  bgSubtitle?: string,
  cart?: boolean,
  bgColor?: string,
  notif?: boolean,
  more?: boolean,
  logout?: boolean,
  iconShare?: boolean,
  sort?: boolean,
  onPressSort?: () => void,
  onPressMore?: () => void,
  onPressLogout?: () => void,
  onPressShare?: () => void,
  showCountry?: boolean
}
export default function m(props: EventHeaderProps): any {
  const counter = UserNotification.state().useSelector(s => s.unread)
  const countryImage = esp.modProp("user/location_gps").currentCountryState.useSelector((s: any) => s?.image)
  let inputSearch: any = useRef<TextInput>(null)
  let query: string = ''


  return (
    <View style={{}} >
      <LibStatusbar style="dark" />
      <View style={{ flexDirection: 'row', backgroundColor: props.bgColor ? props.bgColor : 'white', padding: 15, paddingVertical: 10, alignItems: 'center', paddingTop: LibStyle.STATUSBAR_HEIGHT + 17, ...LibStyle.elevation(2) }} >
        <TouchableOpacity hitSlop={{ top: 4, bottom: 4, left: 4, right: 4 }} onPress={() => LibNavigation.back()} >
          <LibPicture style={{ height: 27, width: 27 }} source={esp.assets('icons/ic_header_back.png')} />
        </TouchableOpacity>
        {
          props.doSearch || props.onChangeText ?
            <View style={{ marginLeft: 15, borderRadius: 20, flexDirection: 'row', padding: 5, alignItems: 'center', backgroundColor: "#ffffff", borderStyle: "solid", borderWidth: 0.5, borderColor: "#c5c5c5", flex: 1, marginHorizontal: 12 }} >
              <LibPicture style={{ height: 15, width: 15, marginLeft: 6, marginRight: 6 }} source={esp.assets('icons/ic_search.png')} />
              <TextInput
                autoFocus
                ref={r => inputSearch = r}
                style={{ fontFamily: "ArialBold", fontSize: 12, color: "#9e9e9e", flex: 1 }}
                placeholder={props.searchPlaceholder || esp.lang("event/header", "search_product")}
                onChangeText={(t) => props.onChangeText && props.onChangeText(query = t)}
                returnKeyType={'search'}
                returnKeyLabel={'Search'}
                placeholderTextColor={'#e5e5e5'}
                onSubmitEditing={() => props.doSearch && props.doSearch(query)}
              />
            </View>
            :
            <View style={{ marginHorizontal: 12, flex: 1 }} >
              <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: props.titleColor ? props.titleColor : "#70472b" }} numberOfLines={1} >{props.title}</Text>
              {props.subtitle && <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, letterSpacing: 0, color: props.bgSubtitle ? props.bgSubtitle : "#BBBBBB", marginTop: 3 }} >{props.subtitle}</Text>}
            </View>
        }
        {
          props.iconShare &&
          <TouchableOpacity style={{ marginRight: 7 }} onPress={() => { props.onPressShare && props.onPressShare() }}>
            <LibIcon.MaterialIcons name="share" color="#6F442D" size={22} />
          </TouchableOpacity>
        }
        {
          props.notif ?
            <View />
            :
            <TouchableOpacity onPress={() => {
              EventIndexProperty.isLogin(() => {
                LibNavigation.navigate('notification/index')

              })
            }}>
              <View>
                <View style={{ borderRadius: 25, backgroundColor: '#fff', padding: 4 }}>
                  <LibPicture style={{ height: 22, width: 27, resizeMode: 'contain' }} source={esp.assets('icons/home/notification.png')} />
                  <EventBadge counter={counter} />
                </View>
              </View>
            </TouchableOpacity>
        }
        {
          props.onPressMore && props.more &&
          <TouchableOpacity style={{ marginRight: 3.5 }} onPress={() => { props.onPressMore && props.onPressMore() }}>
            <LibIcon name="dots-vertical" color="#6F442D" />
          </TouchableOpacity>
        }
        {
          props.onPressLogout && props.logout &&
          <TouchableOpacity style={{ marginRight: 3.5, marginLeft: 4 }} onPress={() => { props.onPressLogout && props.onPressLogout() }}>
            <LibIcon name="logout" color="#6F442D" />
          </TouchableOpacity>
        }
        {
          props.onPressSort && props.sort &&
          <TouchableOpacity style={{ marginRight: 3.5 }} onPress={() => { props.onPressSort && props.onPressSort() }}>
            <LibIcon name="sort-variant" color="#6F442D" />
          </TouchableOpacity>
        }
        {/* {
          props?.showCountry &&
          <Pressable onPress={() => {
            LibNavigation.navigateForResult("user/location_country_server", undefined, 15).then((value) => {
              esp.modProp("user/location_gps").findCountryByCountryCode(value.code)
            })
          }} style={{ alignItems: "center", justifyContent: "center", width: 30, height: 30, borderRadius: 15, borderWidth: 1, borderColor: "#e6e6e6", overflow: "hidden" }} >
            <LibPicture source={{ uri: countryImage || "https://cdn.jsdelivr.net/npm/round-flag-icons@1.3.0/flags/id.svg" }} style={{ width: 30, height: 30 }} resizeMode='contain' />
          </Pressable>
        } */}
      </View>
    </View>
  )
}