// 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 { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketMerchant_item, MarketMerchant_itemProps } from 'esoftplay/cache/market/merchant_item/import';

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


export interface MarketMerchantArgs {
  title?: string
  url?: string
  keyword?: string
}
export interface MarketMerchantProps {
  url?: string
}

export default function m(props: MarketMerchantProps): any {
  const { url, title, keyword }: any = LibNavigation.getArgsAll<any>(props, { url: props.url || 'shop/merchant' })
  const [query, setQuery, getQuery] = useSafeState('')

  function buildUrl(url: string): string {
    if (getQuery() != '') {
      url += url.includes('?') ? '&' : '?'
      url += 'title=' + getQuery()
    }
    return url
  }

  function renderItems(item: MarketMerchant_itemProps, i: number) {
    return (
      <MarketMerchant_item key={i} {...item} />
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <View style={{ backgroundColor: "white" }} >
        <MarketHeader
          onlyBack
          centerView={() => (
            <TouchableOpacity
              onPress={() => LibNavigation.navigateForResult('market/product_search', { keyword: query, placeholder: esp.lang("market/merchant", "search_merchant") }).then(setQuery)}
              style={styleId_2pL09Y} >
              <LibTextstyle text={query || esp.lang("market/merchant", "search_merchant1")} textStyle={"callout"} style={styleId_23IKRE} />
            </TouchableOpacity>
          )}
          rightView={() => (
            <TouchableOpacity style={styleId_ZrFKul} >
              <LibIcon name={"magnify"} />
            </TouchableOpacity>
          )} />
      </View>
      <LibInfinite
        key={buildUrl(url)}
        url={buildUrl(url)}
        errorView={(e: string) => (<MarketEmpty msg={e} />)}
        renderItem={renderItems}
        LoadingView={
          <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
            <View>
              {
                new Array(10).fill('').map((item: any, i: number) => (
                  <View key={i} style={styleId_i3rWJ}>
                    <View style={styleId_Z1yDiid} />
                    <View style={styleId_23fjhC}>
                      <View style={styleId_Z21RHlj} />
                      <View style={styleId_1Ulo0J} />
                    </View>
                  </View>
                ))
              }
            </View>
          </LibSkeleton>
        }
      />
    </View>
  )
}

const styleId_2pL09Y: any = { flex: 1, backgroundColor: "#f1f2f3", borderRadius: 10, height: 36, paddingHorizontal: 12, justifyContent: 'center' }
const styleId_23IKRE: any = { fontSize: 14, color: '#999' }
const styleId_ZrFKul: any = { width: 50, alignItems: 'center' }
const styleId_i3rWJ: any = { paddingHorizontal: 17, paddingVertical: 10, flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "#eee", alignItems: "center" }
const styleId_Z1yDiid: any = { width: 30, height: 30, borderRadius: 15, backgroundColor: 'white' }
const styleId_23fjhC: any = { flex: 1, marginLeft: 10 }
const styleId_Z21RHlj: any = { backgroundColor: 'white', width: '40%', height: 20, borderRadius: 10 }
const styleId_1Ulo0J: any = { backgroundColor: 'white', width: '70%', height: 14, borderRadius: 7, marginTop: 5 }