// withHooks
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';


import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketMerchant_favorite_item } from 'esoftplay/cache/market/merchant_favorite_item/import';

import React, { useRef } from 'react';
import { Keyboard, TextInput, TouchableOpacity, View } from 'react-native';


export interface MarketMerchant_favoriteArgs {

}
export interface MarketMerchant_favoriteProps {

}
export default function m(props: MarketMerchant_favoriteProps): any {
  let query = useRef<string>('').current
  const [querySubmitted, setQuerySumitted] = useSafeState('')
  let inputText = useRef<TextInput>(null)

  function renderItems(item: any, index: number) {
    return (
      <MarketMerchant_favorite_item {...item} />)
  }

  return (
    <View style={{ flex: 1 }} >
      <View style={styleId_1diSXQ} >
        <LibPicture style={styleId_mL5OU} source={esp.assets('market/ic_search.png')} />
        <TextInput
          ref={inputText}
          style={{ fontFamily: "ArialBold", fontSize: 12, color: "#9e9e9e", flex: 1 }}
          placeholder={esp.lang("market/merchant_favorite", "text_search")}
          onChangeText={(t) => { query = t }}
          returnKeyType={'search'}
          returnKeyLabel={'Search'}
          placeholderTextColor={'#e5e5e5'}
          onSubmitEditing={() => {
            Keyboard.dismiss()
            setQuerySumitted(query)
          }}
        />
        {
          querySubmitted != '' &&
          <TouchableOpacity activeOpacity={1} onPress={() => { setQuerySumitted(''); inputText.current?.setNativeProps({ text: '' }) }} style={{ marginRight: 10 }} >
            <LibIcon name="close" color="#e6e6e6" />
          </TouchableOpacity>
        }
      </View>
      <LibInfinite
        key={querySubmitted}
        style={{ marginHorizontal: 12 }}
        url={"shop/merchant_favorite?keyword=" + querySubmitted}
        keyExtractor={(item, i) => i.toString()}
        renderItem={renderItems}
        errorView={(e: string) => (<MarketEmpty msg={e} />)}
      />
    </View>
  )
}
const styleId_1diSXQ: any = { marginBottom: 10, marginHorizontal: 17, flexDirection: 'row', alignItems: 'center', height: 31, borderRadius: 16, backgroundColor: "#f5f5f5" }
const styleId_mL5OU: any = { height: 15, width: 15, marginLeft: 6, marginRight: 6 }