// 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 { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketAds_hit } from 'esoftplay/cache/market/ads_hit/import';
import { MarketProduct_detailArgs } from 'esoftplay/cache/market/product_detail/import';
import { MarketProduct_detail_hits } from 'esoftplay/cache/market/product_detail_hits/import';
import { MarketProgress_bar, MarketProgress_barProperty } from 'esoftplay/cache/market/progress_bar/import';
import { MarketRating } from 'esoftplay/cache/market/rating/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { MarketWishlistProperty } from 'esoftplay/cache/market/wishlist/import';

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


interface promo {
  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: number,
  promo_discount: number,
  promo_sale: string,
  promo_sold: number,
}

export interface MarketProduct_itemProps {
  currency: string,
  description: string,
  discount: string,
  discount_title: string,
  id: string,
  image: string,
  price: string,
  price_max: string,
  rating: string,
  rating_value: string,
  rating_count: string,
  sale: string,
  sale_max: string,
  title: string,
  url: string,
  width: number,
  preorder: number,
  wishlist: 0 | 1
  onChangeWish: (wish: 1 | 0) => void,
  stocks: number,
  advert_id: string,
  advert_keyword: string
  search_keyword?: string
  promo: promo
  voucher: any
  is_labeled?: number,
  type?: 'product_section' | 'default'
}
export default function m(props: MarketProduct_itemProps): any {
  // const imageHeight = useMemo(() => props.width * 0.7, [])
  const barWidth = useMemo(() => props.width - 20, [])
  const styleId_ZRnQp9: any = { marginTop: 0, margin: 5, borderRadius: 4, backgroundColor: 'white', width: props.width, borderWidth: 1, borderColor: '#f1f2f3' }
  const styleId_1jTyWG: any = { height: props.width, width: props.width, backgroundColor: '#f1f2f3' }
  const type = props.type || 'default'
  // const date = new Date().getTime()

  // useEffect(() => {
  //   if (props.advert_id) {
  //     MarketProduct_list_searchProperty.adsSaveCache(props.advert_keyword, [[props.advert_id, props.id, date]], 'product')
  //   }
  // }, [])

  return (
    <TouchableOpacity
      onPress={() => {
        MarketProduct_detail_hits.productHit(props.id)
        MarketAds_hit.adsHit(props.advert_id, props.id, props.search_keyword)
        LibNavigation.push<MarketProduct_detailArgs>("market/product_detail", { url: props.url, advert_id: props.advert_id, advert_keyword: props.advert_keyword })
      }}
      style={styleId_ZRnQp9} >
      <View style={styleId_1VU4Ky} >
        <View>
          <LibPicture
            source={{ uri: props.image }}
            style={styleId_1jTyWG} resizeMode="cover"
          />
          {
            props?.promo?.promo_list_image_ribbon != '' &&
            <LibPicture source={{ uri: props?.promo?.promo_list_image_ribbon }} style={{ height: props.width, width: props.width, position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }} resizeMode="contain" />
          }
          {
            props?.promo?.promo_stock == 0 && props.stocks == 0 &&
            <View style={{ position: 'absolute', bottom: 5, left: 5, padding: 5, borderRadius: 5, backgroundColor: LibUtils.hexToRgba('#000', 0.4) }} >
              <LibTextstyle
                numberOfLines={1}
                style={{ color: "white", fontSize: 12 }}
                textStyle="caption1"
                text={esp.lang("market/product_item", "empty_stocks")} />
            </View>
          }
          {
            props.stocks != 0 && props.stocks <= 5 &&
            <View style={{ position: 'absolute', bottom: 5, left: 5, padding: 5, paddingVertical: 3, borderRadius: 5, backgroundColor: LibUtils.hexToRgba('#000', 0.4) }} >
              <LibTextstyle
                numberOfLines={1}
                style={{ color: "white", fontSize: 9 }}
                textStyle="caption1"
                text={esp.lang("market/product_item", "promo_left", LibUtils.number(props?.stocks))} />
            </View>
          }
          {
            props?.promo?.promo_stock != 0 && props?.promo?.promo_stock <= 5 &&
            <View style={{ position: 'absolute', bottom: 5, left: 5, padding: 5, paddingVertical: 3, borderRadius: 5, backgroundColor: LibUtils.hexToRgba('#000', 0.4) }} >
              <LibTextstyle
                numberOfLines={1}
                style={{ color: "white", fontSize: 9 }}
                textStyle="caption1"
                text={esp.lang("market/product_item", "promo_stocks", LibUtils.number(props?.promo?.promo_stock))} />
            </View>
          }
          {//ads
            props?.advert_id &&
            <View style={{ position: 'absolute', bottom: 5, right: 5, padding: 5, paddingVertical: 3, borderRadius: 5, backgroundColor: LibUtils.hexToRgba('#000', 0.4) }} >
              <LibTextstyle
                numberOfLines={1}
                style={{ color: "white", fontSize: 9 }}
                textStyle="caption1"
                text={esp.lang("market/product_item", "text_ads")} />
            </View>
          }
        </View>
        {/* {
          <View style={{ backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.4), paddingHorizontal: 10, paddingVertical: 5 }} >
            <LibTextstyle
              style={{}}
              textStyle="caption1"
              text={props.discount_title} />
          </View>
        } */}
        <View style={{ paddingHorizontal: 10, paddingTop: 10, paddingBottom: 5 }} >
          {
            type == "default" &&
            <LibTextstyle
              numberOfLines={2}
              ellipsizeMode="tail"
              style={styleId_Z1VoH6r}
              textStyle="caption1"
              text={props.title} />
          }
          <LibTextstyle
            textStyle="footnote"
            text={LibUtils.money(props?.promo?.promo_sale || props.sale, props.currency)}
            style={styleId_1GJMf6} />
          {
            props?.promo?.promo_discount && props?.promo?.promo_discount != 0 &&
            <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }} >
              <LinearGradient
                colors={styleId_ZXlTFP}
                style={styleId_NBLDq} >
                <LibTextstyle textStyle="caption1" text={props?.promo?.promo_discount + '%'} style={styleId_1PAJyn} />
              </LinearGradient>
              <LibTextstyle textStyle="caption2" text={LibUtils.money(props.price, props.currency)} style={styleId_HyEuD} />
            </View>
          }

          {/* voucher */}
          {
            props?.voucher &&
            <View style={{ flexDirection: 'row' }} >
              <View style={{ marginBottom: 5, backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.5), paddingVertical: 5, paddingHorizontal: 7, borderRadius: 3 }} >
                <Text allowFontScaling={false} ellipsizeMode="middle" numberOfLines={1} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{props?.voucher?.amount_type == 1 ? "Diskon " + LibUtils.money(props?.voucher?.amount) : "Diskon " + props?.voucher?.amount + "%"}</Text>
              </View>
            </View>
          }
          {
            props.preorder > 0 &&
            <View style={{ flexDirection: 'row' }} >
              <View style={{ marginBottom: 5, backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.3), paddingVertical: 5, paddingHorizontal: 15, borderRadius: 15 }} >
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#03192a" }}>{esp.lang("market/product_item", "preorder")}</Text>
              </View>
            </View>
          }

          {
            props?.promo?.promo_sold &&
            <MarketProgress_bar barWidth={barWidth || 0} barCount={props?.promo?.promo_stock} progressCount={props?.promo?.promo_sold || 0} />
          }
          {
            props?.promo?.promo_stock && props?.promo?.promo_sold &&
            <LibTextstyle textStyle='caption2' text={MarketProgress_barProperty.labelProgress(props?.promo?.promo_stock, props?.promo?.promo_sold)} style={styleId_Z2jcFoM} />
          }
          <View style={styleId_ZItSdM} >
            <View style={styleId_1fmvBo} >
              {
                props.rating != "0,0,0,0,0" &&
                <MarketRating rating={props.rating} />
              }
              {
                props.rating_count != '0' &&
                <LibTextstyle textStyle='caption2' text={"(" + props.rating_count + ")"} style={{ color: '#999' }} />
              }
            </View>
            {
              LibUtils.checkUndefined(props, 'wishlist') &&
              <TouchableOpacity onPress={() => {
                MarketWishlistProperty.set(props.id, props.wishlist == 1 ? 0 : 1, (wish) => props.onChangeWish(wish))
              }} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} >
                <LibIcon name='heart' color={props.wishlist != 0 ? '#EC4E2C' : '#e6e6e6'} />
              </TouchableOpacity>
            }
          </View>
        </View>
      </View>
    </TouchableOpacity>
  )
}
const styleId_1VU4Ky: any = { flex: 1, overflow: "hidden", borderRadius: 4 }
const styleId_Z1VoH6r: any = { height: 36, color: '#888' }
const styleId_1fmvBo: any = { flexDirection: 'row', alignItems: 'center' }
const styleId_ZXlTFP: any = [MarketStyle.colorPrimaryMarket, MarketStyle.colorPrimaryMarket]
const styleId_NBLDq: any = { borderRadius: 3, paddingHorizontal: 5, marginRight: 5 }
const styleId_1PAJyn: any = { color: 'white', fontWeight: 'bold', fontSize: 9 }
const styleId_1GJMf6: any = { marginBottom: 5, fontWeight: "bold", }
const styleId_Z2jcFoM: any = { marginTop: 5, color: '#999', marginBottom: 10, fontSize: 9 }
const styleId_ZItSdM: any = { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }
const styleId_HyEuD: any = { fontSize: 9, textDecorationLine: 'line-through', textDecorationStyle: 'solid', color: '#999' }