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

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
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 { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketProduct_detailArgs } from 'esoftplay/cache/market/product_detail/import';
import { MarketProduct_editArgs } from 'esoftplay/cache/market/product_edit/import';
import { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/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 MarketMerchant_product_itemArgs {

}

export interface MarketMerchant_product_itemProps {
  id: string,
  title: string,
  description: string,
  merchant_name: string,
  currency: string,
  price: string,
  price_max: string,
  discount: string,
  discount_title: string,
  sale: string,
  sale_max: string,
  rating: string,
  rating_value: string,
  rating_count: string,
  image: string,
  location_name: string,
  publish: string,
  active: string,
  wishlist: string,
  url: string,
  alert: string,
  price_locked: string,
  stocks: string,
  sold: string,
  promo_list_id: string,
  promo_discount: number,
  promo_stock: string,
  discount_image: string,
  max_order: string,
  promo_buy: string,
  image_ribbon: string,
  reviewing_admin: string,
  reviewing_resubmit: string,
  onDelete: () => void
  promo?: any
}

export default function m(props: MarketMerchant_product_itemProps): any {


  function deleteProduct() {
    LibDialog.warningConfirm(esp.lang("market/merchant_product_item", "dlt_title"), esp.lang("market/merchant_product_item", "dlt_msg"), esp.lang("market/merchant_product_item", "dlt_confirm"), () => {
      LibProgress.show(esp.lang("market/merchant_product_item", "dlt_wait"))
      new LibCurl('shop/product_delete', { id: props.id },
        (res) => {
          LibProgress.hide()
          props.onDelete()
        }, (msg) => {
          LibProgress.hide()
          LibToastProperty.show(msg?.message)
        }, 1
      )
    }, esp.lang("market/merchant_product_item", "dlt_cancel"), () => { })
  }

  function slideShow() {
    MarketSlidingupProperty.add(
      <View style={styleId_1eYAr8} >
        <View style={styleId_Z20F5tD} >
          <TouchableOpacity onPress={() => MarketSlidingupProperty.hide()} >
            <LibIcon name='close' />
          </TouchableOpacity>
          <Text allowFontScaling={false} style={styleId_Z1EQ2IC} >{esp.lang("market/merchant_product_item", "settings")}</Text>
        </View>
        <View style={styleId_Z27jvu8} >
          <TouchableOpacity onPress={() => {
            MarketSlidingupProperty.hide()
            LibNavigation.navigate<MarketProduct_detailArgs>('market/product_detail', { url: props.url })
          }} style={styleId_Z20F5tD} >
            <LibIcon name="open-in-new" color={MarketStyle.colorPrimaryMarket} style={styleId_1hdny6} />
            <Text allowFontScaling={false} style={styleId_1734UO} >{esp.lang("market/merchant_product_item", "show_detail")}</Text>
          </TouchableOpacity>
        </View>
      </View>
    )
  }

  return (
    <TouchableOpacity activeOpacity={1} onPress={() => {
      LibNavigation.navigate<MarketProduct_detailArgs>('market/product_detail', { url: props.url })
    }} style={styleId_ZVCW9N} >
      <View style={styleId_Z1IS0fI} >
        <LibPicture source={{ uri: props.image }} style={styleId_ZS9miW} />
        <View style={styleId_ZcMJmd} >
          <LibTextstyle
            numberOfLines={2}
            ellipsizeMode="tail"
            style={{ color: '#888' }}
            textStyle="caption1"
            text={props.title} />
          <View style={styleId_288dL4} >
            {
              props.sale != props.price &&
              <LibTextstyle
                textStyle="footnote"
                text={LibUtils.money(props.price, props.currency)}
                style={styleId_ZTcDHg} />
            }
            <LibTextstyle
              textStyle="footnote"
              text={" " + LibUtils.money(props.sale, props.currency)}
              style={styleId_GW3Y7} />
          </View>
          <View style={styleId_1fmvBo} >
            {
              props.stocks &&
              <LibTextstyle
                numberOfLines={2}
                ellipsizeMode="tail"
                style={styleId_Z2tFlHU}
                textStyle="caption1"
                text={esp.lang("market/merchant_product_item", "stocks", LibUtils.number(props.stocks))} />
            }
            {
              props.sold &&
              <LibTextstyle
                numberOfLines={2}
                ellipsizeMode="tail"
                style={styleId_Z2tFlHU}
                textStyle="caption1"
                text={esp.lang("market/merchant_product_item", "sold", LibUtils.number(props.sold))} />
            }
          </View>
          {
            props?.alert != '' && props?.alert != null &&
            <View style={styleId_17srzJ} >
              <View style={styleId_1LIVWf} >
                <LibTextstyle
                  textStyle="footnote"
                  text={props.alert}
                  style={styleId_Z2mCSd6} />
              </View>
            </View>
          }
        </View>
      </View>
      {
        props?.promo?.promo_discount && props.promo.promo_discount != 0 &&
        <View style={styleId_3UUw0} >
          <LinearGradient
            colors={[MarketStyle.colorPrimaryMarket, MarketStyle.colorPrimaryMarket]}
            style={styleId_ZOvmfC} >
            <LibTextstyle textStyle="caption1" text={esp.lang("market/merchant_product_item", "discount", props?.promo?.promo_discount)} style={styleId_1PAJyn} />
          </LinearGradient>
        </View>

      }
      <View style={styleId_2pjzPN} >
        <MarketButton onPress={() => {
          LibNavigation.navigate<MarketProduct_editArgs>('market/product_edit', { id: props?.id, url: 'shop/product_edit', reviewing_admin: props?.reviewing_admin, reviewing_resubmit: props?.reviewing_resubmit })
        }} text={esp.lang("market/merchant_product_item", "edit_product")} textStyle={styleId_Z2mCmbA} color={'#707070'} colorBackground={"white"} colorBorder={'#707070'} />
        <MarketButton onPress={() => { deleteProduct() }} text={esp.lang("market/merchant_product_item", "delete_product")} textStyle={styleId_Z2mCmbA} color={'#707070'} colorBackground={"white"} colorBorder={'#707070'} />
        <TouchableOpacity onPress={() => {
          slideShow()
          MarketSlidingupProperty.show()
        }} >
          <LibIcon name="dots-vertical" />
        </TouchableOpacity>
      </View>
    </TouchableOpacity>)
}
const styleId_1eYAr8: any = { backgroundColor: 'white', borderTopLeftRadius: 15, borderTopRightRadius: 15, paddingBottom: 25 }
const styleId_Z20F5tD: any = { flexDirection: 'row', alignItems: 'center', padding: 10 }
const styleId_Z1EQ2IC: any = { marginLeft: 15, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }
const styleId_Z27jvu8: any = { marginHorizontal: 10 }
const styleId_1hdny6: any = { marginRight: 15 }
const styleId_1734UO: any = { fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }
const styleId_ZVCW9N: any = { marginTop: 1, marginHorizontal: 15, marginBottom: 10, padding: 10, borderRadius: 5, backgroundColor: 'white', ...LibStyle.elevation(2) }
const styleId_Z1IS0fI: any = { flexDirection: 'row' }
const styleId_ZS9miW: any = { width: 60, height: 60, borderRadius: 5, marginRight: 10 }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_288dL4: any = { flexDirection: 'row', alignItems: 'center', marginTop: 3, marginBottom: 5 }
const styleId_ZTcDHg: any = { textDecorationLine: 'line-through', textDecorationStyle: 'solid', color: '#707070' }
const styleId_GW3Y7: any = { fontWeight: "bold" }
const styleId_1fmvBo: any = { flexDirection: 'row', alignItems: 'center' }
const styleId_Z2tFlHU: any = { color: '#888', flex: 1 }
const styleId_17srzJ: any = { flexDirection: 'row', flexWrap: 'wrap' }
const styleId_1LIVWf: any = { paddingVertical: 3, paddingHorizontal: 10, marginTop: 5, borderRadius: 5, backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.2) }
const styleId_Z2mCSd6: any = { fontSize: 10 }
const styleId_3UUw0: any = { flexDirection: 'row', position: 'absolute', top: 0, right: 0 }
const styleId_ZOvmfC: any = { borderTopRightRadius: 5, paddingVertical: 5, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' }
const styleId_1PAJyn: any = { color: 'white', fontWeight: 'bold' }
const styleId_2pjzPN: any = { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginTop: 10 }
const styleId_Z2mCmbA: any = { fontSize: 14 }