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

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 { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketMerchant_voucher_itemArgs {

}
export interface MarketMerchant_voucher_itemProps {
  onDelete: () => void,
  active: string,
  amount: string,
  amount_max: string,
  amount_type: string,
  cat: string,
  code: string,
  description: string,
  expired_date: string,
  id: string,
  image: string,
  merchant_id: string,
  merchant_name: string,
  publish: string,
  order_min: 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_merchant: string,
  use_mitra: string,
  use_payment: string,
  use_product: string,
  use_product_bundle: string,
  use_product_category: string,
}


export default function m(props: MarketMerchant_voucher_itemProps): any {
  return (
    <View>
      <View style={{ backgroundColor: '#fff', padding: 15 }}>
        <Text allowFontScaling={false}>{props.title}</Text>
        <Text style={{ marginTop: 5, color: '#c9c9c9', fontSize: 12 }}>{LibUtils.getDateRange(props.start_date, props.expired_date, '')}</Text>
        <View style={{ marginTop: 8, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
          <View style={{ flexDirection: 'row' }}>
            <LibPicture style={{ height: 50, width: 50, borderRadius: 10 }} source={props.image == "" ? esp.assets('icon.png') : { uri: props.image }} />
            <View style={{ marginLeft: 10 }}>
              <Text allowFontScaling={false} style={{ color: LibStyle.colorRed }}>{props.amount_type == "1" ? esp.lang("market/merchant_voucher_item", "discount", LibUtils.money(props.amount)) : esp.lang("market/merchant_voucher_item", "percentage", props.amount)}</Text>
              <Text allowFontScaling={false} style={{ fontSize: 12 }}>Min. belanja {LibUtils.money(props.order_min)}</Text>
              <Text allowFontScaling={false} style={{ color: '#c5c5c5', fontSize: 12 }}>{props.use_product == "0" ? esp.lang("market/merchant_voucher_item", "vc_merchant") : esp.lang("market/merchant_voucher_item", "vc_product")}</Text>
            </View>
          </View>
          <Text>{props.code}</Text>
        </View>

        <View style={{ marginTop: 10, flexDirection: 'row', justifyContent: 'space-between' }}>
          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
            <LibIcon color={MarketStyle.colorPrimaryMarket} name="bookmark-outline" />
            <Text allowFontScaling={false} style={{ marginLeft: 5, color: '#c5c5c5', fontSize: 12 }}>{esp.lang("market/merchant_voucher_item", "claimed", props.qty_claimed)}</Text>
          </View>
          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
            <LibIcon color={MarketStyle.colorPrimaryMarket} name="checkbox-outline" />
            <Text allowFontScaling={false} style={{ marginLeft: 5, color: '#c5c5c5', fontSize: 12 }}>{esp.lang("market/merchant_voucher_item", "used", props.qty_used)}</Text>
          </View>
          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
            <LibIcon color={MarketStyle.colorPrimaryMarket} name="file-cabinet" />
            <Text allowFontScaling={false} style={{ marginLeft: 5, color: '#c5c5c5', fontSize: 12 }}>{esp.lang("market/merchant_voucher_item", "rest", LibUtils.number(Number(props.qty) - Number(props.qty_used)))}</Text>
          </View>
        </View>

        <View style={{ marginTop: 15, flexDirection: 'row', justifyContent: 'space-between' }}>
          <View style={{ width: LibStyle.width * 0.5 - 20 }}>
            <MarketButton text={esp.lang("market/merchant_voucher_item", "delete")} onPress={() => {
              props.onDelete()
            }} colorBackground={"#fff"} color={MarketStyle.colorPrimaryMarket} colorBorder={MarketStyle.colorPrimaryMarket} />
          </View>
          <View style={{ width: LibStyle.width * 0.5 - 20 }}>
            <MarketButton text={esp.lang("market/merchant_voucher_item", "edit")} onPress={() => {
              LibNavigation.navigate('market/merchant_voucher_input', { url: props.url_detail, id: props.id })
            }} colorBackground={"#fff"} color={MarketStyle.colorPrimaryMarket} colorBorder={MarketStyle.colorPrimaryMarket} />
          </View>
        </View>
      </View>
      <View style={{ height: 10, backgroundColor: '#f5f5f5' }} />
    </View>
  )
}