// withHooks
// noPage

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

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


export interface MarketMerchant_voucher_product_itemArgs {

}
export interface MarketMerchant_voucher_product_itemProps {
  selected: boolean,
  image?: string,
  id: string,
  cat_id: string,
  title: string,
  sale: string,
  sale_max: string,
  stocks: string,
  sold: string,
  rating: string,
  price: string,
  rating_value: string,
  rating_count: string,
  publish: string,
  active: string,
  alert: string,
  currency: string,

  onPress: () => any,
}
export default function m(props: MarketMerchant_voucher_product_itemProps): any {
  return (
    <TouchableOpacity onPress={() => {
      props.onPress()
    }} style={{ margin: 15, marginBottom: 0, backgroundColor: '#fff', borderRadius: 5, padding: 10, ...LibStyle.elevation(2) }}>
      <View style={{ flex: 1, overflow: "hidden", borderRadius: 5, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>

        <LibIcon name={props?.selected ? "checkbox-marked" : "checkbox-blank-outline"} color={MarketStyle.colorPrimaryMarket} />

        <LibPicture
          source={{ uri: props.image }}
          style={{ marginLeft: 10, marginRight: 10, height: 70, width: 70, borderRadius: 10, backgroundColor: '#f1f2f3' }} resizeMode="cover"
        />
        <View style={{ flex: 1 }} >
          <LibTextstyle
            numberOfLines={2}
            ellipsizeMode="tail"
            style={{ color: '#888' }}
            textStyle="caption1"
            text={props.title} />
          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3, marginBottom: 5, }} >
            {
              props.sale != props.price &&
              <LibTextstyle
                textStyle="footnote"
                text={LibUtils.money(props.price, props.currency)}
                style={{ textDecorationLine: 'line-through', textDecorationStyle: 'solid', color: '#707070' }} />
            }
            <LibTextstyle
              textStyle="footnote"
              text={" " + LibUtils.money(props.sale, props.currency)}
              style={{ fontWeight: "bold" }} />
          </View>
          {
            props.stocks &&
            <LibTextstyle
              numberOfLines={2}
              ellipsizeMode="tail"
              style={{ color: '#888' }}
              textStyle="caption1"
              text={esp.lang("market/merchant_voucher_product_item", "strok", LibUtils.number(props?.stocks))} />
          }
          {
            props?.alert != '' && props?.alert != null &&
            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }} >
              <View style={{ paddingVertical: 3, paddingHorizontal: 10, marginTop: 5, borderRadius: 5, backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.2) }} >
                <LibTextstyle
                  textStyle="footnote"
                  text={props.alert}
                  style={{ fontSize: 10 }} />
              </View>
            </View>
          }
        </View>

      </View>
    </TouchableOpacity>
  )
}