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

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketRating } from 'esoftplay/cache/market/rating/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

import { LinearGradient } from 'expo-linear-gradient';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface MarketPromotion_product_itemArgs {

}

interface MarketPromo {
  promo_id: string,
  promo_list_id: string,
  promo_list_name: string,
  promo_list_image: string,
  promo_list_image_ribbon: string,
  promo_list_start: string,
  promo_list_end: string,
  promo_list_max_order: string,
  promo_stock: string,
  promo_discount: number,
  promo_sale: string,
  promo_sold: string,
}

export interface MarketPromotion_product_itemProps {
  title: string,
  image: string,
  rating: string,
  price: string,
  currency: string,
  stocks: string,
  sold: string,
  sale: string,
  onDelete?: () => void
  checked?: 0 | 1,
  available?: boolean
  onSelected?: () => void
  promo?: MarketPromo
}

export default function m(props: MarketPromotion_product_itemProps): any {
  return (
    <View >
      <TouchableOpacity activeOpacity={1} onPress={() => { }} style={{ backgroundColor: 'white', flexDirection: 'row', padding: 10, paddingHorizontal: 15, alignContent: 'center', alignItems: 'center' }}>
        {
          props.onSelected &&
          <>
            {
              props.available && props.checked ?
                <LibIcon name="checkbox-blank" color={'#e6e6e6'} />
                :
                <TouchableOpacity onPress={props.onSelected}>
                  <LibIcon name={props?.checked != 0 ? 'checkbox-marked' : 'checkbox-blank-outline'} color={MarketStyle.colorPrimaryMarket} />
                </TouchableOpacity>
            }
          </>
        }
        <LibPicture source={{ uri: props?.image }} style={{ marginHorizontal: 10, borderRadius: 5, height: 80, width: 80 }} resizeMode="cover" />
        <View style={{ flex: 1 }}>
          <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }} >{props?.title}</Text>
          {/* <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#000' }} >{LibUtils.money(props?.price, props?.currency)}</Text> */}

          {
            props?.promo?.promo_discount && props?.promo?.promo_discount != 0 &&
            <View style={{ flexDirection: 'row', alignItems: 'center' }} >
              <LinearGradient
                colors={[MarketStyle.colorPrimaryMarket, MarketStyle.colorPrimaryMarket]}
                style={{ borderRadius: 3, paddingVertical: 4, paddingHorizontal: 6, marginRight: 7 }} >
                <LibTextstyle textStyle="caption1" text={props?.promo?.promo_discount + '%'} style={{ color: 'white', fontWeight: 'bold' }} />
              </LinearGradient>
              <LibTextstyle textStyle="caption2" text={LibUtils.money(props.price, props.currency)} style={{ textDecorationLine: 'line-through', textDecorationStyle: 'solid' }} />
            </View>
          }
          <LibTextstyle
            textStyle="footnote"
            text={LibUtils.money(props?.promo?.promo_sale || props?.sale, props.currency)}
            style={{ fontWeight: "bold", fontSize: 16 }} />

          <MarketRating rating={props?.rating} />
          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5 }}>
            {
              (props.stocks || props.promo?.promo_stock) &&
              <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: '#000' }} >{esp.lang("market/promotion_product_item", "stok", LibUtils.number(props.promo?.promo_stock || props?.stocks))}</Text>
            }
            {
              props.sold &&
              <Text allowFontScaling={false} style={{ marginHorizontal: 10, fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: '#000' }} >{esp.lang("market/promotion_product_item", "sold", LibUtils.number(props?.sold))}</Text>
            }
          </View>
        </View>
        {
          props.onDelete &&
          <TouchableOpacity onPress={props.onDelete}>
            <LibIcon name={'delete-outline'} color={MarketStyle.colorPrimaryMarket} />
          </TouchableOpacity>
        }
      </TouchableOpacity>
    </View>
  )
}