// withHooks

import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import esp from 'esoftplay/esp';

import moment from 'esoftplay/moment';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
moment().locale('id')


export interface MarketMerchant_order_dependentArgs {
  url?: string
}
export interface MarketMerchant_order_dependentProps {

}
export default function m(props: MarketMerchant_order_dependentProps): any {
  const { url } = LibNavigation.getArgsAll(props)

  function renderItems(x: any, i: number) {
    return (
      <TouchableOpacity key={i} activeOpacity={1} onPress={() => { LibNavigation.navigate('market/order_detail', { url: x.url_detail }) }} style={[styleId_ZQ1LyM]}>
        <View style={styleId_2hmYYz}>
          <Text allowFontScaling={false} style={styleId_Z1ygV2H} >{x.invoice_merchant}</Text>
          <Text allowFontScaling={false} style={styleId_zqGrr} >{moment(x.updated).localeFormat('DD/MM/YYYY HH:mm')}</Text>
        </View>
        <View style={styleId_tpeK8} >
          <Text allowFontScaling={false} style={styleId_297xRr} >{esp.lang("market/merchant_order_dependent", "review")}</Text>
          <Text allowFontScaling={false} style={styleId_2gvJ7o} >{LibUtils.money(x.total)}</Text>
        </View>
        <View style={styleId_Z1i5LUH} >
          <View style={styleId_2hBw7U} >
            <Text allowFontScaling={false} style={styleId_297xRr} >{x.status_title}</Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }

  return (
    <View style={styleId_ZcMJmd} >
      <MarketHeader onlyBack title={esp.lang("market/merchant_order_dependent", "header_title")} />
      <LibInfinite
        url={url || 'shop/order_merchant_dependent_list'}
        ListHeaderComponent={<View style={styleId_2tlMHb} />}
        renderItem={renderItems}
      />
    </View>
  )
}
const styleId_ZQ1LyM: any = { borderRadius: 4, backgroundColor: "#fff", padding: 15, marginBottom: 8, marginHorizontal: 15, ...LibStyle.elevation(2) }
const styleId_2hmYYz: any = { flexDirection: 'row', justifyContent: 'space-between' }
const styleId_Z1ygV2H: any = { fontFamily: "SFProText", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }
const styleId_zqGrr: any = { fontFamily: "SFProText", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }
const styleId_tpeK8: any = { flexDirection: 'row', marginTop: 10 }
const styleId_297xRr: any = { fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }
const styleId_2gvJ7o: any = { fontFamily: "SFProText", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }
const styleId_Z1i5LUH: any = { flexDirection: 'row', marginTop: 5 }
const styleId_2hBw7U: any = { padding: 5, paddingHorizontal: 15, borderRadius: 15, backgroundColor: '#fff3cd' }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_2tlMHb: any = { marginTop: 10 }