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

import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/import';
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 { LibLazy } from 'esoftplay/cache/lib/lazy/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStatusbar } from 'esoftplay/cache/lib/statusbar/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 { MarketBadge } from 'esoftplay/cache/market/badge/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketCartProperty } from 'esoftplay/cache/market/cart/import';
import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
import { MarketDevice_type } from 'esoftplay/cache/market/device_type/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketNotice } from 'esoftplay/cache/market/notice/import';
import { MarketProduct_detail_description } from 'esoftplay/cache/market/product_detail_description/import';
import { MarketProduct_detail_discuss } from 'esoftplay/cache/market/product_detail_discuss/import';
import { MarketProduct_detail_general } from 'esoftplay/cache/market/product_detail_general/import';
import { MarketProduct_detail_information } from 'esoftplay/cache/market/product_detail_information/import';
import { MarketProduct_detail_merchant } from 'esoftplay/cache/market/product_detail_merchant/import';
import { MarketProduct_detail_options } from 'esoftplay/cache/market/product_detail_options/import';
import { MarketProduct_detail_recomended } from 'esoftplay/cache/market/product_detail_recomended/import';
import { MarketProduct_detail_related } from 'esoftplay/cache/market/product_detail_related/import';
import { MarketProduct_detail_review } from 'esoftplay/cache/market/product_detail_review/import';
import { MarketProduct_detail_shipping } from 'esoftplay/cache/market/product_detail_shipping/import';
import { MarketProduct_detail_similar } from 'esoftplay/cache/market/product_detail_similar/import';
import { MarketProduct_detail_specification } from 'esoftplay/cache/market/product_detail_specification/import';
import { MarketProduct_detail_variant } from 'esoftplay/cache/market/product_detail_variant/import';
import { MarketProduct_detail_wholesale } from 'esoftplay/cache/market/product_detail_wholesale/import';
import { MarketProgress_bar, MarketProgress_barProperty } from 'esoftplay/cache/market/progress_bar/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketSheet } from 'esoftplay/cache/market/sheet/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { MarketUser_profileProperty } from 'esoftplay/cache/market/user_profile/import';
import { UseCurl } from 'esoftplay/cache/use/curl/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';

import useGlobalState from 'esoftplay/global';
import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import React, { useEffect, useMemo, useRef } from 'react';
import { Pressable, Text, TouchableOpacity, View } from 'react-native';


export interface MarketProduct_detailArgs {
  url: string,
  advert_id?: string,
  advert_keyword?: string
}
export interface MarketProduct_detailProps {

}
const indexState = useGlobalState(0)

export function renderPrice(price: string, price_max: string, currency: string) {
  let out = LibUtils.money(price, currency)
  if (price < price_max)
    out = LibUtils.money(price, currency) + ' - ' + LibUtils.money(price_max, currency)
  return out
}

export default function m(props: MarketProduct_detailProps): any {
  const { url, advert_id, advert_keyword } = LibNavigation.getArgsAll<any>(props)
  const user = UserClass.state().useSelector(s => s)
  const [cartCount] = MarketCartProperty.countState().useState()
  const variantRef = useRef<LibSlidingup>(null)
  const variantRefBuy = useRef<LibSlidingup>(null)
  const [data, setData] = useSafeState<any>()
  const [shippingLocation, setShippingLocation] = useSafeState({ id: user?.location_id, name: user?.location_name, latlong: user?.location_latlong })
  const shippingCourier = useRef<LibSlidingup>(null)
  const [curl, loading, error] = UseCurl(true)
  const dimension = useMemo(() => MarketDevice_type(2.5, 5, 6), [])
  const imgDimension = useMemo(() => (LibStyle.width - ((dimension + 1) * 10)) / dimension, [])
  const sheetRef = useRef<LibSlidingup>(null)
  let currentTime = useRef(moment().localeFormat("YYYY-MM-DD H:m:s")).current

  function loadData() {
    curl(url, null, (res, msg) => {
      setData(res)
      // esp.log(res, "res", url);
    }, 1
    )
  }

  useEffect(() => {
    loadData()
    return () => indexState.set(0)
  }, [])

  function deleteProduct(id: string) {
    LibDialog.warningConfirm(esp.lang("market/product_detail", "delete_title"), esp.lang("market/product_detail", "delete_msg"), esp.lang("market/product_detail", "delete_confirm"), () => {
      LibProgress.show(esp.lang("market/product_detail", "delete_wait"))
      new LibCurl('shop/product_delete', { id: id },
        (res) => {
          LibProgress.hide()
          LibNavigation.backToRoot()
          LibNavigation.navigate("market/account_merchant")
          LibNavigation.navigate('market/merchant_detail', { url: 'shop/merchant_detail/' + user?.merchant_id, tabIndex: 2 })
        }, (msg) => {
          esp.log(msg);
          LibProgress.hide()
          LibToastProperty.show(msg?.message)
        }, 1
      )
    }, esp.lang("market/product_detail", "delete_cancel"), () => { })
  }

  if (loading || !data) {
    return (
      <View style={{ flex: 1 }}>
        <LibStatusbar style="dark" />
        <LibSkeleton>
          <View style={{ flexDirection: 'row', alignItems: 'center', padding: 15, paddingVertical: 10, paddingTop: LibStyle.STATUSBAR_HEIGHT + 17, borderBottomWidth: 1 }}>
            <LibIcon name='arrow-left' />
            <View style={{ height: 32, marginLeft: 15, borderRadius: 20, flexDirection: 'row', padding: 5, alignItems: 'center', borderWidth: 1, borderColor: "#c5c5c5", flex: 1, marginHorizontal: 12 }}>
              <View style={{ height: 20, width: 20, borderRadius: 10, marginLeft: 6, marginRight: 6, backgroundColor: 'white' }} />
              <View style={{ width: '70%', height: 14, borderRadius: 7, backgroundColor: 'white' }} />
            </View>
            <View style={{ height: 30, width: 30, borderRadius: 15, marginLeft: 10, backgroundColor: 'white' }} />
            <View style={{ height: 30, width: 30, borderRadius: 15, marginLeft: 10, backgroundColor: 'white' }} />
          </View>
          <View style={{ height: LibStyle.width * 0.8, width: LibStyle.width, backgroundColor: 'white' }} />
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <LibSkeleton.BoxHalf size={25} />
            <View style={{ flex: 1 }} />
            <LibIcon name="heart" style={{ margin: 10 }} />
          </View>
          <View style={{ marginTop: 15 }} />
          <LibSkeleton.BoxHalf size={20} />
          <View style={{ marginTop: 10 }} />
          <View style={{ height: 15, width: '20%', borderRadius: 7.5, backgroundColor: 'white', margin: 10 }} />
          <View style={{ flexDirection: 'row', alignItems: 'center', margin: 10 }}>
            <View style={{ height: 20, width: '20%', borderRadius: 10, backgroundColor: 'white' }} />
            <View style={{ flex: 1 }} />
            <View style={{ height: 20, width: '20%', borderRadius: 10, backgroundColor: 'white' }} />
          </View>
          <View style={{ height: 8, backgroundColor: '#F5F5F5', marginVertical: 15 }} />
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <View style={{ flex: 1 }}>
              <LibSkeleton.BoxHalf size={15} />
              <LibSkeleton.BoxFlex size={15} />
            </View>
            <LibIcon name="chevron-right" style={{ marginHorizontal: 10 }} />
          </View>
          <View style={{ height: 8, backgroundColor: '#F5F5F5', marginVertical: 15 }} />
          <LibSkeleton.BoxHalf size={15} />
          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
            <View style={{ height: 15, width: '20%', borderRadius: 7.5, backgroundColor: 'white', margin: 10 }} />
            <View style={{ height: 15, width: '20%', borderRadius: 7.5, backgroundColor: 'white', margin: 10 }} />
          </View>
          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
            <View style={{ height: 15, width: '20%', borderRadius: 7.5, backgroundColor: 'white', margin: 10 }} />
            <View style={{ height: 15, width: '20%', borderRadius: 7.5, backgroundColor: 'white', margin: 10 }} />
          </View>
        </LibSkeleton>
      </View>
    )
  }

  return (
    <>
      {
        error != '' ?
          <MarketEmpty msg={error} />
          :
          <LibLazy>
            <View style={{ flex: 1, backgroundColor: '#fff' }}>
              <MarketHeader onlyBack centerView={() => (
                <TouchableOpacity activeOpacity={1} onPress={() => {
                  LibNavigation.navigateForResult('market/product_search').then((t) => {
                    LibNavigation.push('market/product_list_search', { url: 'shop/product_list?keyword=' + t, keyword: t })
                  })
                }} style={{ height: 32, marginLeft: 15, borderRadius: 20, flexDirection: 'row', padding: 5, alignItems: 'center', backgroundColor: "#ffffff", borderStyle: "solid", borderWidth: 0.5, borderColor: "#c5c5c5", flex: 1, marginHorizontal: 12 }} >
                  <LibPicture style={{ height: 15, width: 15, marginLeft: 6, marginRight: 6 }} source={esp.assets('market/ic_search.png')} />
                  <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, color: "#e5e5e5", flex: 1 }} >{esp.lang("market/product_detail", "search")}</Text>
                </TouchableOpacity>
              )}
                rightView={() => (
                  <>
                    {data?.url_share && data?.url_share != "" &&
                      <Pressable onPress={() => {
                        LibUtils.share(data?.url_share)
                      }}>
                        <View style={{ marginRight: 10, padding: 4 }}>
                          <LibIcon.MaterialIcons name="share" size={22} color="#6F442D" />
                        </View>
                      </Pressable>
                    }
                    <Pressable onPress={() => {
                      MarketUser_profileProperty.isLogin(() => {
                        LibNavigation.navigate('market/cart')
                      })
                    }}>
                      <View style={{ marginRight: 10, padding: 4 }}>
                        <LibPicture style={{ height: 22, width: 22, resizeMode: 'contain' }} source={esp.assets('market/cart.png')} />
                        <MarketBadge counter={cartCount} />
                      </View>
                    </Pressable>
                  </>
                )}
              />
              <LibScroll onRefresh={loadData} scrollEventThrottle={16} >
                <View>
                  {
                    data?.alert != '' && data?.alert != null &&
                    <MarketNotice mode="warning" text={data?.alert || ''} canPress={false} onPress={() => {
                    }} containerStyle={{ marginHorizontal: 0, marginVertical: 0, borderRadius: 0, paddingVertical: 5 }} />
                  }
                  {
                    data?.merchant?.user_id == user?.id ?
                      <>
                        {
                          LibUtils.checkUndefined(data, 'merchant.alert.0') && data?.merchant?.alert?.map((item: any, i: number) => (
                            <MarketNotice key={i} mode={item.type} text={item.message} canPress={item.module != '' && item.url != ''} onPress={() => {
                              if (item?.module != '') {
                                LibNavigation.navigate(item?.module, { url: item?.url })
                              }
                            }} containerStyle={{ marginHorizontal: 0, marginVertical: 0, borderRadius: 0, backgroundColor: '#f8f8f8', paddingVertical: 5 }} />
                          ))
                        }
                      </>
                      :
                      <>
                        {
                          LibUtils.checkUndefined(data, 'merchant.info.0') && data?.merchant?.info?.map((item: any, i: number) => (
                            <MarketNotice key={i} mode={item.type} text={item.message} canPress={item.module != '' && item.url != ''} onPress={() => {
                              if (item?.module != '') {
                                LibNavigation.navigate(item?.module, { url: item?.url })
                              }
                            }} containerStyle={{ marginHorizontal: 0, marginVertical: 0, borderRadius: 0, backgroundColor: '#f8f8f8', paddingVertical: 5 }} />
                          ))
                        }
                      </>
                  }
                  <LibCarrousel
                    autoplay={false}
                    pageInfo
                    style={applyStyle({ height: LibStyle.width * 0.8, width: LibStyle.width })}
                    pageInfoBackgroundColor={"rgba(255,255,255,0.6)"}
                    pageInfoTextSeparator="/"
                    pageInfoBottomContainerStyle={applyStyle({ alignSelf: 'flex-end' })}
                    pageInfoTextStyle={{ fontSize: 12, color: "#333" }}>
                    {
                      LibUtils.checkUndefined(data, 'images.0') && data.images.map((item: any, i: number) => {
                        return (
                          <TouchableOpacity activeOpacity={1} key={i.toString()} onPress={() => LibNavigation.navigate("lib/gallery", { images: data?.images })} >
                            <LibPicture
                              key={i}
                              source={{ uri: item?.image }}
                              style={applyStyle({ height: LibStyle.width * 0.8, width: LibStyle.width })} />
                          </TouchableOpacity>
                        )
                      })
                    }
                  </LibCarrousel>

                  {
                    data?.promo?.promo_stock && data?.promo?.promo_sold && data?.promo?.promo_list_end >= currentTime &&
                    <>
                      <View style={{ flexDirection: 'row', marginHorizontal: 20, marginVertical: 10 }} >
                        <View style={{ flex: 1 }} >
                          <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14 }} >{data?.promo?.promo_list_name}</Text>
                          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }}>
                            <MarketProgress_bar barWidth={90} barCount={data?.promo?.promo_stock} progressCount={data?.promo?.promo_sold} progressColor={MarketStyle.colorPrimaryMarket} barColor='#f1f1f1' />
                            <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 12, marginLeft: 7 }} >{MarketProgress_barProperty.labelProgress(data?.promo?.promo_stock, data?.promo?.promo_sold)}</Text>
                          </View>
                        </View>
                        <View style={{ alignItems: 'center' }} >
                          {
                            currentTime < data?.promo?.promo_list_start ?
                              <>
                                <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14 }} >{esp.lang("market/product_detail", "promo_start")}</Text>
                                <MarketCountdown onExpired={loadData} expired={moment(data?.promo?.promo_list_start).localeFormat('YYYY-MM-DD HH:mm:ss')} onlyDay
                                  style={{ color: 'white', fontSize: 12, fontWeight: 'bold' }}
                                  containerStyle={{ backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.7), paddingHorizontal: 15, borderRadius: 20, marginTop: 5 }} />
                              </>
                              :
                              <>
                                <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14 }} >{esp.lang("market/product_detail", "promo_end")}</Text>
                                <MarketCountdown onExpired={loadData} expired={moment(data?.promo?.promo_list_end).localeFormat('YYYY-MM-DD HH:mm:ss')} onlyDay
                                  style={{ color: 'white', fontSize: 12, fontWeight: 'bold' }}
                                  containerStyle={{ backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.7), paddingHorizontal: 15, borderRadius: 20, marginTop: 5 }} />
                              </>
                          }
                        </View>
                      </View>
                      <View style={{ height: 8, flex: 1, backgroundColor: '#F5F5F5' }} />
                    </>
                  }

                  <MarketProduct_detail_general
                    onChangeWish={(wish) => setData(() => LibObject.set(data, wish)('wishlist'))}
                    {...data} />
                  <View style={{ marginTop: 15, height: 8, flex: 1, backgroundColor: '#F5F5F5' }} />

                  {/* voucher */}
                  {
                    // esp.isDebug('') &&
                    data?.vouchers?.length > 0 &&
                    <>
                      <TouchableOpacity onPress={() => { LibNavigation.navigate('market/product_detail_voucher', { dataVouchers: data?.vouchers }) }} style={{ alignContent: 'center', alignItems: 'center', padding: 15, paddingLeft: 25, paddingRight: 15, flexDirection: 'row', justifyContent: 'space-between' }}>
                        <Text allowFontScaling={false} style={{ flex: 1 }}>{esp.lang("market/product_detail", "merchant_voucher")}</Text>
                        <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
                          {
                            data?.vouchers?.slice(0, 2).map((item: any, i: number) => {
                              return (
                                <View key={i} style={{ marginLeft: 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: 8, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{item.amount_type == 1 ? esp.lang("market/product_detail", "disc_amount", LibUtils.money(item.amount)) : esp.lang("market/product_detail", "disc_percen", item.amount)}</Text>
                                </View>
                              )
                            })
                          }
                          <LibIcon name="chevron-right" style={{ marginLeft: 8 }} />
                        </View>
                      </TouchableOpacity>
                      <View style={{ height: 8, flex: 1, backgroundColor: '#F5F5F5' }} />
                    </>
                  }

                  {
                    LibUtils.checkUndefined(data, "options.0") &&
                    <>
                      <MarketProduct_detail_options options={data?.options} onPress={() => {
                        if ((data?.merchant_id != user?.merchant_id) && data?.merchant?.status != 0 && data?.merchant?.disabled != 1) {
                          variantRef.current!.show()
                        }
                      }} />
                      <View style={{ marginTop: 15, height: 8, flex: 1, backgroundColor: '#F5F5F5' }} />
                    </>
                  }

                  {/* promo */}
                  {/* <MarketProduct_detail_promo />
                    <View style={{ marginTop: 15, height: 8, flex: 1, backgroundColor: '#F5F5F5' }} /> */}

                  {/* pengiriman */}
                  {
                    data.shipping &&
                    <>
                      <MarketProduct_detail_shipping
                        shipping={data?.shipping}
                        onPress={() => { shippingCourier.current?.show() }}
                        product_id={data?.id}
                        location={shippingLocation}
                      />
                      <View style={{ marginTop: 15, height: 8, flex: 1, backgroundColor: '#F5F5F5' }} />
                    </>
                  }

                  {/* perlindungan produk */}
                  {/* <MarketProduct_detail_protection />
                    <View style={{ marginTop: 15, height: 8, flex: 1, backgroundColor: '#F5F5F5' }} /> */}

                  {
                    data?.price_wholesale?.length > 0 &&
                    <>
                      <MarketProduct_detail_wholesale price_wholesale={data?.price_wholesale} />
                      <View style={{ marginTop: 15, height: 8, flex: 1, backgroundColor: '#F5F5F5' }} />
                    </>
                  }

                  {/* Informasi Produk */}
                  <MarketProduct_detail_information
                    preorder={data?.preorder}
                    weight={data?.weight}
                    condition={data?.conditions}
                    minOrder={data?.min_order}
                    category={data}
                    etalase={data?.label_data}
                  />
                  {
                    LibUtils.checkUndefined(data, 'specification.0') &&
                    <>
                      <View style={{ marginTop: 15 }} />
                      <MarketProduct_detail_specification specification={data?.specification} />
                      <View style={{ height: 8, flex: 1, backgroundColor: '#F5F5F5' }} />
                    </>
                    ||
                    <View style={{ marginTop: 15, height: 8, flex: 1, backgroundColor: '#F5F5F5' }} />
                  }
                  {/* Deskripsi Produk */}
                  {
                    data.description != "" &&
                    <MarketProduct_detail_description description={data?.description} />
                  }

                  {
                    data.merchant &&
                    <>
                      <MarketSection_menu title={esp.lang("market/product_detail", "section_merchant")} />
                      <MarketProduct_detail_merchant {...data?.merchant} onChangeFollow={(follow) => { setData(LibObject.set(data, follow)('merchant', 'followed')) }} />
                    </>
                  }
                  {
                    data.url_review &&
                    <MarketProduct_detail_review data={data} url={data?.url_review} />
                  }

                  {/* Produk terkait  */}
                  {
                    data.url_related &&
                    <MarketProduct_detail_related url={data?.url_related} width={imgDimension} />
                  }
                  {
                    data.url_recommended &&
                    <MarketProduct_detail_recomended url={data?.url_recommended} width={imgDimension} />
                  }
                  {
                    data.url_similar &&
                    <MarketProduct_detail_similar url={data?.url_similar} width={imgDimension} />
                  }

                  {/* Diskusi Produk */}
                  {
                    esp.isDebug('') &&
                    <>
                      <MarketProduct_detail_discuss data={data} url={data?.url_discuss} />
                      <View style={{ height: 8, flex: 1, backgroundColor: '#F5F5F5' }} />
                    </>
                  }


                </View>
                <View />
              </LibScroll>
              {
                data?.live_url ?
                  <MarketButton onPress={() => { LibNavigation.push('market/product_detail', { url: data?.live_url }) }} text={esp.lang("market/product_detail", "live_view")} buttonStyle={{ marginHorizontal: 10, marginVertical: 5 }} />
                  :
                  <View>
                    {
                      data?.url_edit ?
                        <View style={{ flexDirection: "row", justifyContent: "space-between", marginVertical: 5 }} >
                          <View style={{ width: LibStyle.width * 0.5 - 5 }}>
                            <MarketButton
                              textStyle={{ color: "white", fontSize: 14, fontFamily: 'ArialBold' }}
                              onPress={() => LibNavigation.navigate('market/product_edit', { id: data?.id, url: data?.url_edit, reviewing_admin: data?.reviewing_admin, reviewing_resubmit: data?.reviewing_resubmit })}
                              text={esp.lang("market/product_detail", "edit")}
                              buttonStyle={{ borderRadius: 20, marginLeft: 10 }} />
                          </View>
                          <View style={{ width: LibStyle.width * 0.5 - 5 }}>
                            <MarketButton
                              textStyle={{ color: "white", fontSize: 14, fontFamily: 'ArialBold' }}
                              onPress={() => { deleteProduct(data?.id) }}
                              text={esp.lang("market/product_detail", "delete")}
                              buttonStyle={{ borderRadius: 20, marginRight: 10 }} />
                          </View>
                        </View>
                        :
                        (data.stocks == 0 && data?.promo?.promo_stock == 0) ?
                          <View style={{ marginHorizontal: 10, marginVertical: 5, alignItems: "center", justifyContent: "center", backgroundColor: '#f5f5f5', paddingVertical: 8, paddingHorizontal: 30, borderRadius: 6, }} >
                            <LibTextstyle textStyle="body" text={esp.lang("market/product_detail", "sold")} style={{}} />
                          </View>
                          :
                          data?.merchant?.disabled == 1 ?
                            <View style={{ marginHorizontal: 10, marginVertical: 5, alignItems: "center", justifyContent: "center", backgroundColor: '#f5f5f5', paddingVertical: 8, paddingHorizontal: 30, borderRadius: 6, }} >
                              <LibTextstyle textStyle="body" text={(data?.merchant?.disabled_notes && data?.merchant?.status == 0) ? esp.lang("market/product_detail", "merchant_close") : data?.merchant?.disabled_notes} style={{}} />
                            </View>
                            :
                            <>
                              <View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 20, marginBottom: 10, marginTop: 10 }}>
                                <TouchableOpacity
                                  onPress={() => {
                                    MarketUser_profileProperty.isLogin(() => {
                                      esp.modProp('market/chat')?.openChat(data?.merchant?.user_id, undefined, undefined,
                                        {
                                          type: 'market',
                                          image: data.image,
                                          title: data.title,
                                          description: data.sale,
                                          module: 'market/product_detail',
                                          url: 'shop/product_list_detail?id=' + data.id,
                                        })
                                    })
                                  }}
                                  style={{ alignContent: 'center', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 20, backgroundColor: "#fff", borderStyle: "solid", borderWidth: 0.5, borderColor: "#724225" }}>
                                  <LibPicture source={esp.assets('market/001-chat.png')} style={{ height: 20, width: 20 }} />
                                </TouchableOpacity>
                                <View style={{ width: LibStyle.width * 0.5 - 50 }}>
                                  <MarketButton
                                    onPress={() => {
                                      MarketUser_profileProperty.isLogin(() => {
                                        variantRef.current!.show()
                                      })
                                    }}
                                    text={esp.lang("market/product_detail", "add_cart")}
                                    textStyle={{ fontSize: 14, fontFamily: 'ArialBold' }}
                                    color={'#724225'}
                                    buttonStyle={{ borderRadius: 20, paddingHorizontal: 0 }}
                                    colorBackground={'white'}
                                    colorBorder={'#724225'}
                                  />
                                </View>
                                <View style={{ width: LibStyle.width * 0.5 - 50 }}>
                                  <MarketButton
                                    onPress={() => {
                                      MarketUser_profileProperty.isLogin(() => {
                                        variantRefBuy.current!.show()
                                      })
                                    }}
                                    text={esp.lang("market/product_detail", "buy")}
                                    textStyle={{ fontSize: 14, fontFamily: 'ArialBold' }}
                                    buttonStyle={{ borderRadius: 20, paddingHorizontal: 0 }}
                                  />
                                </View>
                              </View>
                            </>
                    }
                  </View>
              }
            </View>
          </LibLazy>
      }
      <LibSlidingup ref={variantRef} >
        <MarketProduct_detail_variant
          product_id={data?.id}
          image={data?.image}
          price={data?.price}
          sale={data?.promo?.promo_sale || data?.sale}
          min_order={data?.min_order}
          currency={data?.currency}
          price_option={data?.price_option}
          merchant_id={data?.merchant_id}
          merchant_name={data?.merchant?.title}
          stocks={data?.promo?.promo_stock ? data?.promo?.promo_stock : data?.stocks}
          name={data?.title}
          options={data?.options}
          onPressDone={() => variantRef?.current?.hide()}
          advert_id={advert_id}
          advert_keyword={advert_keyword}
        />
      </LibSlidingup>
      <LibSlidingup ref={variantRefBuy} >
        <MarketProduct_detail_variant
          buyNow
          product_id={data?.id}
          image={data?.image}
          price={data?.price}
          sale={data?.promo?.promo_sale || data?.sale}
          min_order={data?.min_order}
          currency={data?.currency}
          price_option={data?.price_option}
          merchant_id={data?.merchant_id}
          merchant_name={data?.merchant?.title}
          stocks={data?.promo?.promo_stock ? data?.promo?.promo_stock : data?.stocks}
          name={data?.title}
          options={data?.options}
          onPressDone={() => variantRefBuy?.current?.hide()}
          advert_id={advert_id}
          advert_keyword={advert_keyword}
        />
      </LibSlidingup>

      <MarketSheet
        _ref={sheetRef}
        options={[
          {
            text: esp.lang("market/product_detail", "report"),
            onPress: () => {

            }
          }
        ]}
      />
    </>
  )
}