// withHooks
// noPage
import { applyStyle } from 'esoftplay';

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

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


export interface MarketProduct_detail_generalArgs {

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

export interface MarketProduct_detail_generalProps {
  price: string
  price_max: string
  id: string,
  sale_max: string
  currency: string
  sale: string
  title: string
  stocks: string
  rating_value: number
  rating_count: number
  merchant: any,
  sold: number,
  preorder: number,
  discount: number,
  wishlist: 1 | 0,
  promo: promo
  onChangeWish: (wish: 1 | 0) => void
}
export default function m(props: MarketProduct_detail_generalProps): any {
  return (
    <View>
      <View style={{ marginLeft: 25, alignContent: 'center', alignSelf: 'center', flexDirection: 'row', alignItems: "center", paddingTop: 10 }} >
        <View style={{ flex: 1 }} >
          {
            props?.promo?.promo_sale ?
              <LibTextstyle textStyle="headline" text={LibUtils.money(props?.promo?.promo_sale, props.currency)} style={{ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", lineHeight: 20, letterSpacing: 0, textAlign: "left", color: "#03192a" }} />
              :
              <LibTextstyle textStyle="headline" text={MarketProduct_detailProperty.renderPrice(props?.sale, props.sale_max, props.currency)} style={{ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", lineHeight: 20, letterSpacing: 0, textAlign: "left", color: "#03192a" }} />
          }
          {(props?.price != props.sale || (props?.promo?.promo_id && (props.price != props?.promo?.promo_sale))) &&
            <View style={{ flexDirection: 'row', alignItems: 'center' }} >
              {
                (props?.discount != 0 || props?.promo?.promo_discount != 0) &&
                <LinearGradient
                  colors={[MarketStyle.colorPrimaryMarket, MarketStyle.colorPrimaryMarket]}
                  style={{ borderRadius: 3, paddingVertical: 4, paddingHorizontal: 6, marginRight: 7 }} >
                  <LibTextstyle textStyle="caption1" text={props.discount != 0 ? props.discount.toString() : props?.promo?.promo_discount + '%'} style={{ color: 'white', fontWeight: 'bold' }} />
                </LinearGradient>
              }
              <LibTextstyle textStyle="footnote" text={MarketProduct_detailProperty.renderPrice(props?.price, props?.price_max, props?.currency)} style={applyStyle({ color: LibStyle.colorRed, textDecorationLine: 'line-through', textDecorationStyle: 'solid' })} />
            </View>
          }
        </View>
        <TouchableOpacity
          onPress={() => { MarketWishlistProperty.set(props.id, props.wishlist == 1 ? 0 : 1, (wish) => props.onChangeWish(wish)) }}
          style={applyStyle({ height: 50, width: 50, alignItems: 'center', justifyContent: 'center' })} >
          <LibIcon.AntDesign name={props.wishlist == 1 ? "heart" : "hearto"} size={20} color={props.wishlist == 1 ? '#EC4E2C' : '#e6e6e6'} />
        </TouchableOpacity>
      </View>
      <Text allowFontScaling={false} style={{ marginLeft: 25, marginRight: 25, margin: 15, fontFamily: "Arial", fontSize: 16, fontWeight: "normal", fontStyle: "normal", lineHeight: 16, letterSpacing: 0, textAlign: "left", color: "#03192a" }}>{props?.title}</Text>

      {
        props.preorder > 0 &&
        <View style={{ flexDirection: 'row' }} >
          <View style={{ marginHorizontal: 25, marginBottom: 10, 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_detail_general", "preorder")}</Text>
          </View>
        </View>
      }

      {
        props.stocks && !props?.promo?.promo_stock &&
        <Text allowFontScaling={false} style={{ marginLeft: 25, marginRight: 25, margin: 15, marginTop: 0, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }}>{esp.lang("market/product_detail_general", "stocks", LibUtils.number(props?.stocks))}</Text>
      }

      {
        props?.promo?.promo_stock &&
        <Text allowFontScaling={false} style={{ marginLeft: 25, marginRight: 25, margin: 15, marginTop: 0, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }}>{esp.lang("market/product_detail_general", "stoks_promo", LibUtils.number(props?.promo?.promo_stock))}</Text>
      }

      <View style={{ marginLeft: 25, marginRight: 25, margin: 15, marginTop: 0, flexDirection: 'row', justifyContent: 'space-between' }}>
        {
          (props?.rating_value && props?.rating_count) &&
          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
            <LibPicture source={esp.assets('market/ic_star.png')} style={{ height: 13, width: 13 }} />
            <Text allowFontScaling={false} style={{ marginLeft: 4, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#000" }}>{props?.rating_value}</Text>
            <Text allowFontScaling={false} style={{ marginLeft: 4, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }}>{"(" + props?.rating_count + ")"}</Text>
          </View>
        }
        {/* <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
          <Text allowFontScaling={false} style={{ marginLeft: 4, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#000" }}>Diskusi</Text>
          <Text allowFontScaling={false} style={{ marginLeft: 4, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }}>5</Text>
        </View> */}
        {
          props.sold && !props?.promo?.promo_sold &&
          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
            <Text allowFontScaling={false} style={{ marginLeft: 4, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#000" }}>{esp.lang("market/product_detail_general", "sold")}</Text>
            <Text allowFontScaling={false} style={{ marginLeft: 4, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }}>{LibUtils.number(props.sold)}</Text>
          </View>
        }

        {
          props?.promo?.promo_sold &&
          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
            <Text allowFontScaling={false} style={{ marginLeft: 4, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#000" }}>{esp.lang("market/product_detail_general", "promo_sold")}</Text>
            <Text allowFontScaling={false} style={{ marginLeft: 4, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }}>{LibUtils.number(props?.promo?.promo_sold)}</Text>
          </View>
        }
      </View>

      {/* <View style={{ marginLeft: 25, marginRight: 25, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
        <LibPicture source={esp.assets('market/034-store.png')} style={{ marginRight: 15, width: 20, height: 20 }} resizeMode="cover" />
        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#03192a" }}>{props.merchant.title}</Text>
      </View> */}
    </View>
  )
}