// 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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketMerchant_detailArgs } from 'esoftplay/cache/market/merchant_detail/import';
import { MarketProduct_detailArgs } from 'esoftplay/cache/market/product_detail/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketAds_store_previewArgs {

}

export interface merchantAds {
  id?: string,
  image: string,
  title: string,
  url?: string
}

export interface MarketAds_store_previewProps {
  merchant: merchantAds,
  description: string,
  products: any[],
}
export default function m(props: MarketAds_store_previewProps): any {
  return (
    <View style={styleId_Z1WHFAC}>
      <TouchableOpacity disabled={!props.merchant.url} onPress={() => {
        if (props.merchant.url) {
          LibNavigation.navigate<MarketMerchant_detailArgs>('market/merchant_detail', { url: props?.merchant?.url })
        }
      }} style={styleId_1OuK3V}>
        <LibPicture source={{ uri: props?.merchant?.image }} style={styleId_1H1wTE} resizeMode="cover" />
        <View style={styleId_Zkxxg6} >
          <View style={styleId_YDWwy}>
            <LibIcon name="store" color={LibStyle.colorRed} size={20} />
            <Text allowFontScaling={false} style={styleId_2cBQNn} > Ad</Text>
          </View>
          <Text allowFontScaling={false} style={styleId_Z1QokBF} >{props?.merchant?.title}</Text>
        </View>
      </TouchableOpacity>

      <View style={styleId_Z1XJquD}>
        <ScrollView horizontal showsHorizontalScrollIndicator={false} >

          <View style={styleId_18x1bY}>
            <Text allowFontScaling={false} style={styleId_JvcIn} >{props?.description || esp.lang("market/ads_store_preview", "promo_msg")}</Text>
            <TouchableOpacity disabled={!props.merchant.url} onPress={() => {
              if (props.merchant.url) {
                LibNavigation.navigate<MarketMerchant_detailArgs>('market/merchant_detail', { url: props?.merchant?.url, tabIndex: 2 })
              }
            }} style={styleId_2a4ama}>
              <Text allowFontScaling={false} style={styleId_1c5dO3} >{esp.lang("market/ads_store_preview", "text_check")}</Text>
            </TouchableOpacity>
          </View>

          {
            LibUtils.checkUndefined(props, 'products.0') ?
              props?.products?.slice(0, 2).map((item: any, i: number) => (
                <TouchableOpacity key={i} disabled={!item.url} onPress={() => LibNavigation.navigate<MarketProduct_detailArgs>('market/product_detail', { url: item.url })} activeOpacity={1} style={styleId_1NTFR2}>
                  <LibPicture source={{ uri: item?.image || item.product_image }} style={styleId_2ocsS9} resizeMode="cover" />
                  <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode="middle" style={styleId_ZTbLo6} >{item?.title || item?.product_name}</Text>
                  <View style={styleId_15Osqf}>
                    <Text allowFontScaling={false} style={styleId_Z1xozXa} >{LibUtils.money(item?.sale)}</Text>
                    {
                      item.wishlist ?
                        <LibIcon name='heart' color={item.wishlist != 0 ? '#EC4E2C' : '#e6e6e6'} size={18} />
                        :
                        <LibIcon name='heart' color={'#EC4E2C'} size={18} />
                    }
                  </View>
                </TouchableOpacity>
              ))
              :
              <>
                <View style={styleId_1NTFR2}>
                  <View style={styleId_2sOFuV} />
                  <View style={styleId_1O6XVU} />
                  <View style={styleId_moKIo} />
                </View>
                <View style={styleId_1NTFR2}>
                  <View style={styleId_2sOFuV} />
                  <View style={styleId_1O6XVU} />
                  <View style={styleId_moKIo} />
                </View>
              </>
          }

          {
            props?.products?.length > 1 &&
            <TouchableOpacity disabled={!props.merchant.url} onPress={() => {
              if (props.merchant.url) {
                LibNavigation.navigate<MarketMerchant_detailArgs>('market/merchant_detail', { url: props?.merchant?.url, tabIndex: 2 })
              }
            }} style={styleId_ZI0Heb}>
              <LibIcon name='chevron-right-circle' color={MarketStyle.colorPrimaryMarket} /* style={{ marginBottom: 10 }} */ />
              <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode="middle" style={styleId_10bTRQ} >{esp.lang("market/ads_store_preview", "show_other_product")}</Text>
            </TouchableOpacity>
          }

        </ScrollView>

      </View>
    </View>
  )
}
const styleId_Z1WHFAC: any = { backgroundColor: 'white', marginBottom: 8, paddingTop: 10, paddingBottom: 5 }
const styleId_1OuK3V: any = { flexDirection: 'row', marginHorizontal: 15, paddingBottom: 5 }
const styleId_1H1wTE: any = { height: 50, width: 50, borderRadius: 25 }
const styleId_Zkxxg6: any = { marginLeft: 10 }
const styleId_YDWwy: any = { alignContent: 'center', alignItems: 'center', flexDirection: 'row', }
const styleId_2cBQNn: any = { fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }
const styleId_Z1QokBF: any = { marginTop: 3, fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_Z1XJquD: any = { marginTop: 5, paddingTop: 5, backgroundColor: '#f5f5f5' }
const styleId_18x1bY: any = { alignItems: 'center', justifyContent: 'center', marginBottom: 15, maxWidth: LibStyle.width / 3.3, marginTop: 10, padding: 15, backgroundColor: MarketStyle.colorPrimaryMarket, borderRadius: 10, marginLeft: 15, marginRight: 10 }
const styleId_JvcIn: any = { textAlign: 'center', color: '#fff', fontSize: 13, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }
const styleId_2a4ama: any = { borderRadius: 20, marginTop: 20, borderColor: "#fff", borderWidth: 1, padding: 5 }
const styleId_1c5dO3: any = { textAlign: 'center', color: '#fff', fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }
const styleId_1NTFR2: any = { marginBottom: 15, marginRight: 10, maxWidth: LibStyle.width / 3, marginTop: 10, backgroundColor: "#fff", borderRadius: 10 }
const styleId_2ocsS9: any = { height: 100, width: LibStyle.width / 3, borderRadius: 10 }
const styleId_ZTbLo6: any = { margin: 10, marginTop: 8, fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }
const styleId_15Osqf: any = { margin: 10, marginTop: 0, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }
const styleId_Z1xozXa: any = { fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#000' }
const styleId_2sOFuV: any = { height: 100, width: LibStyle.width / 3, borderRadius: 10, backgroundColor: '#e6e6e6' }
const styleId_1O6XVU: any = { backgroundColor: '#e6e6e6', marginHorizontal: 10, marginTop: 7, height: 30, borderRadius: 5 }
const styleId_moKIo: any = { backgroundColor: '#e6e6e6', margin: 10, marginTop: 7, height: 15, borderRadius: 5 }
const styleId_ZI0Heb: any = { justifyContent: 'center', alignContent: 'center', alignItems: 'center', marginBottom: 15, marginRight: 10, padding: 10, maxWidth: LibStyle.width / 3, marginTop: 10, backgroundColor: "#fff", borderRadius: 10 }
const styleId_10bTRQ: any = { textAlign: 'center', color: MarketStyle.colorPrimaryMarket, marginTop: 8, fontSize: 11, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }