// 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 { 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 { MarketWishlistProperty } from 'esoftplay/cache/market/wishlist/import';

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


export interface MarketWishlist_itemArgs {

}
export interface MarketWishlist_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,
  merchant_name: string,
  wishlist: 0 | 1
  onChangeWish: (wish: 1 | 0) => void
}
export default function m(props: MarketWishlist_itemProps): any {
  const imgDim = (LibStyle.width - 100) / 3

  return (
    <>
      <TouchableOpacity
        onPress={() => {
          LibNavigation.push("market/product_detail", { url: props.url })
        }}
        style={[styleId_TK1tn, LibStyle.elevation(2)]} >
        <View style={styleId_Z1c9t7k} >
          <LibPicture
            source={{ uri: props.image }}
            style={[styleId_Zb3H4f, { height: imgDim, width: imgDim }]} resizeMode="cover"
          />
          <View style={styleId_Z1G5jQ3} >
            <LibTextstyle
              numberOfLines={2}
              ellipsizeMode="tail"
              style={styleId_2eznyQ}
              textStyle="caption1"
              text={props.title} />
            <LibTextstyle
              textStyle="footnote"
              text={LibUtils.money(props.sale, props.currency)}
              style={styleId_g8Ytk} />
            <View style={styleId_Zrz44M} >
              {
                props.rating != "0,0,0,0,0" &&
                <MarketRating rating={props.rating} />
              }
              {
                props.rating_count != '0' &&
                <LibTextstyle textStyle='caption2' text={"(" + props.rating_count + ")"} style={styleId_RxuAT} />
              }
            </View>
            <View style={styleId_Zrz44M} >
              <LibPicture source={esp.assets('market/034-store.png')} style={styleId_1O0Vyf} resizeMode='contain' />
              <LibTextstyle
                textStyle="footnote"
                text={LibUtils.ucwords(props.merchant_name)}
                style={styleId_Z2mCCcl} />
            </View>
          </View>
        </View>
        <View style={{}} >
          <TouchableOpacity onPress={() => {
            MarketWishlistProperty.set(props.id, props.wishlist == 1 ? 0 : 1, (wish) => props.onChangeWish(wish))
          }} style={styleId_e4hze} >
            <LibIcon name="delete" color={'#f1f1f1'} size={16} />
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    </>
  )
}
const styleId_TK1tn: any = { margin: 5, borderRadius: 5, padding: 10, backgroundColor: 'white', flexDirection: 'row' }
const styleId_Z1c9t7k: any = { flexDirection: "row", flex: 1 }
const styleId_Zb3H4f: any = { backgroundColor: '#f1f2f3', borderRadius: 5 }
const styleId_Z1G5jQ3: any = { paddingHorizontal: 10, flex: 1 }
const styleId_2eznyQ: any = { fontSize: 16, lineHeight: 20 }
const styleId_g8Ytk: any = { fontWeight: 'bold', fontSize: 14, marginTop: 5 }
const styleId_Zrz44M: any = { flexDirection: 'row', alignItems: 'center', marginTop: 5 }
const styleId_RxuAT: any = { color: '#999' }
const styleId_1O0Vyf: any = { width: 15, height: 15, marginRight: 8 }
const styleId_Z2mCCcl: any = { fontSize: 12 }
const styleId_e4hze: any = { alignItems: "center", padding: 4, borderRadius: 5, backgroundColor: MarketStyle.colorPrimaryMarket }