// withHooks
// noPage

import { LibIcon } from 'esoftplay/cache/lib/icon/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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';

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


export interface MarketVoucher_itemArgs {

}
export interface MarketVoucher_itemProps {
  active: string,
  amount: string,
  amount_max: string,
  amount_type: string,
  cat: string,
  code: string,
  description: string,
  expired_date: string,
  id: string,
  image: string,
  order_min: string,
  publish: string,
  qty: string,
  qty_claimed: string,
  qty_used: string,
  start_date: string,
  status: number,
  target: string,
  title: string,
  url_detail: string,
  use_courier: string,
  use_payment: string,
  use_product: string,
  use_product_category: string,

}
export default function m(props: MarketVoucher_itemProps): any {
  let imgWidth = LibStyle.width - 30
  let imgHeight = (LibStyle.width - 30) / 3
  let date = moment(props.expired_date).localeFormat("YYYY-MM-DD") == moment().localeFormat("YYYY-MM-DD")

  return (
    <TouchableOpacity onPress={() => {
      if (props.url_detail != "") {
        LibNavigation.navigate('market/checkout_voucher_detail', { url: props.url_detail })
      }
    }} style={{ margin: 15, marginBottom: 3, backgroundColor: '#e8e8e8', borderRadius: 10 }}>
      <LibPicture source={{ uri: props.image == "" ? "https://i.ibb.co/J32Bh7S/No-image-1.png" : props.image }} resizeMode="cover" style={{ width: imgWidth, height: imgHeight, borderTopLeftRadius: 10, borderTopRightRadius: 10 }} />
      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', position: 'absolute', top: imgHeight / 2 }}>
        <View style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: '#fff', marginLeft: -8 }} />
        <View style={{ flex: 1 }} />
        <View style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: '#fff', marginRight: -8 }} />
      </View>
      <View style={{ borderWidth: 1, borderColor: '#e8e8e8', padding: 10, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: "#fff", borderBottomLeftRadius: 10, borderBottomRightRadius: 10 }}>
        <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
          <LibIcon name="clock-outline" color={MarketStyle.colorPrimaryMarket} />
          <View style={{ marginLeft: 8 }}>
            {
              date ?
                <MarketCountdown expired={moment(props?.expired_date).localeFormat('YYYY-MM-DD HH:mm:ss')}
                  style={{ color: MarketStyle.colorBrown, fontSize: 10, fontWeight: 'bold' }}
                  containerStyle={{ backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.2), paddingHorizontal: 8, borderRadius: 5 }} />
                :
                <>
                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#a5a5a5" }}>{esp.lang("market/voucher_item", "exp_date")}</Text>
                  <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: 'bold', color: MarketStyle.colorBrown }}>{moment(props.expired_date).localeFormat("DD MMM YYYY")}</Text>
                </>
            }

          </View>
        </View>
        <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
          <LibIcon name="currency-usd-circle-outline" color={MarketStyle.colorPrimaryMarket} />
          <View style={{ marginLeft: 8 }}>
            {
              Number(props.order_min) == 0 ?
                <Text allowFontScaling={false} style={{ marginBottom: 3, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#a5a5a5" }}>{esp.lang("market/voucher_item", "no_minimum")}</Text>
                :
                <>
                  <Text allowFontScaling={false} style={{ marginBottom: 3, fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#a5a5a5" }}>{esp.lang("market/voucher_item", "order_min")}</Text>
                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#724225" }}>{LibUtils.money(props.order_min)}</Text>
                </>
            }
          </View>
        </View>
      </View>
    </TouchableOpacity>
  )
}