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

import { LibFocus } from 'esoftplay/cache/lib/focus/import';
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 { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketEmpty_product } from 'esoftplay/cache/market/empty_product/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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

interface productItem {
  id: string,
  title: string,
  description: string,
  merchant_name: string,
  currency: string,
  price: string,
  price_max: string,
  discount: string,
  discount_title: string,
  sale: string,
  sale_max: string,
  rating: string,
  rating_value: string,
  rating_count: string,
  image: string,
  location_name: string,
  publish: string,
  active: string,
  wishlist: string,
  url: string,
  alert: string,
}

export interface MarketProduct_list_draftArgs {
  title?: string,
  url: string
}
export interface MarketProduct_list_draftProps {

}
export default function m(props: MarketProduct_list_draftProps): any {
  const { title, url } = LibNavigation.getArgsAll<any>(props)

  function renderItems(item: productItem, i: number) {
    return (
      <TouchableOpacity key={i}
        onPress={() => { LibNavigation.push("market/product_detail", { url: item.url }) }} style={[styleId_Z2wD7rF]} >
        <LibPicture
          source={{ uri: item.image }}
          style={styleId_ZIx1TX} resizeMode="cover"
        />
        <View style={styleId_Z1KkDTb} >
          <LibTextstyle
            numberOfLines={2}
            ellipsizeMode="tail"
            style={styleId_2eznyQ}
            textStyle="caption1"
            text={item.title} />
          <LibTextstyle
            textStyle="footnote"
            text={LibUtils.money(item.sale, item.currency)}
            style={styleId_g8Ytk} />
          {
            item?.alert != '' && item?.alert != null &&
            <View style={styleId_17srzJ} >
              <View style={styleId_1LIVWf} >
                <LibTextstyle
                  textStyle="footnote"
                  text={"[ " + item.alert + " ]"}
                  style={styleId_Z2mCSd6} />
              </View>
            </View>
          }
        </View>
      </TouchableOpacity>
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <LibFocus />
      <MarketHeader title={title || esp.lang("market/product_list_draft", "header_title")}
        leftIcon={{ name: "arrow-left", onPress: () => LibNavigation.back() }}
        rightView={() => (
          <TouchableOpacity onPress={() => {
            LibNavigation.navigateForResult('market/product_search').then((t) => {
              LibNavigation.push('market/product_list_search', { url: url, keyword: t })
            })
          }} style={styleId_ZnTxdz} >
            <LibIcon name="magnify" />
          </TouchableOpacity>
        )} />
      <LibInfinite
        url={url}
        style={styleId_1oSw9x}
        initialNumToRender={4}
        keyExtractor={(item, i) => i.toString()}
        errorView={(eror: string) => {
          if (eror) {
            return (
              <MarketEmpty_product message={eror} />
            )
          }
        }}
        renderItem={renderItems}
      />
    </View>)
}
const styleId_Z2wD7rF: any = { margin: 5, borderRadius: 5, padding: 10, backgroundColor: 'white', flexDirection: 'row', ...LibStyle.elevation(2) }
const styleId_ZIx1TX: any = { height: 60, width: 60, backgroundColor: '#f1f2f3', borderRadius: 5 }
const styleId_Z1KkDTb: any = { paddingHorizontal: 10 }
const styleId_2eznyQ: any = { fontSize: 16, lineHeight: 20 }
const styleId_g8Ytk: any = { fontWeight: 'bold', fontSize: 14, marginTop: 5 }
const styleId_17srzJ: any = { flexDirection: 'row', flexWrap: 'wrap' }
const styleId_1LIVWf: any = { paddingVertical: 3, paddingHorizontal: 10, marginTop: 5, borderRadius: 5, backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.2) }
const styleId_Z2mCSd6: any = { fontSize: 10 }
const styleId_ZnTxdz: any = { height: 50, justifyContent: 'center', paddingRight: 17 }
const styleId_1oSw9x: any = { marginHorizontal: 5 }