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

import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

import moment from 'esoftplay/moment';
import { Pressable, Text, TouchableOpacity, View } from 'react-native';


export interface MarketCheckout_voucher_itemArgs {

}
export interface MarketCheckout_voucher_itemProps {
  amount?: string,
  amount_max: string,
  amount_type?: string,
  cat?: string,
  expired_date?: string,
  id?: string,
  image?: string,
  order_minimum?: string,
  qty?: string,
  qty_claimed?: string,
  qty_used?: string,
  title?: string,
  url_detail?: string,
  showDetail: boolean,

  selected: any,
  onSelected: () => any,
  onNavigate: () => any,
}
export default function m(props: MarketCheckout_voucher_itemProps): any {
  const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds

  return (
    <Pressable onPress={() => {
      props.onSelected()
    }} style={[styleId_Z1JWklF, { borderColor: props?.selected ? MarketStyle.colorPrimaryMarket : LibStyle.colorGrey, backgroundColor: props?.selected ? LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.1) : '#fff' }]}>
      <Text allowFontScaling={false} style={styleId_Z1eM7Ue}>{String(props?.title)}</Text>
      <View style={styleId_1V2BhX}>
        <Text allowFontScaling={false} style={styleId_ZLGT9I}>{esp.lang("market/checkout_voucher_item", "end_day", String(Math.round(Math.abs((Number(moment().toMiliseconds()) - Number(moment(props.expired_date).toMiliseconds())) / oneDay))))}</Text>
        {
          props.showDetail &&
          <TouchableOpacity hitSlop={styleId_Z1DsRHt} onPress={() => {
            props.onNavigate()
          }}>
            <Text allowFontScaling={false} style={styleId_Z15IImf}>{esp.lang("market/checkout_voucher_item", "show_detail")}</Text>
          </TouchableOpacity>
        }
      </View>
    </Pressable>
  )
}
const styleId_Z1JWklF: any = { borderWidth: 1, margin: 10, marginBottom: 5, padding: 10, borderRadius: 5/* , ...LibStyle.elevation(2) */ }
const styleId_Z1eM7Ue: any = { flexWrap: 'wrap', flex: 1, fontSize: 12, fontWeight: 'bold' }
const styleId_1V2BhX: any = { marginTop: 3, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }
const styleId_ZLGT9I: any = { fontSize: 12, fontWeight: 'normal', color: "#c1c1c1" }
const styleId_Z1DsRHt: any = { top: 8, bottom: 8, left: 8, right: 8 }
const styleId_Z15IImf: any = { fontSize: 12, fontWeight: 'normal', color: MarketStyle.colorPrimaryMarket }