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

import { LibBlock } from 'esoftplay/cache/lib/block/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { MarketMerchant_detailArgs } from 'esoftplay/cache/market/merchant_detail/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketMerchant_favorite_itemArgs {

}
export interface MarketMerchant_favorite_itemProps {
  id: string
  user_id: string
  title: string
  description: string
  image: string
  address: string
  location_id: string
  location_name: string
  location_latlong: string
  status: string
  publish: string
  active: string
  url: string
}
export default function m(props: MarketMerchant_favorite_itemProps): any {
  const itemWidth = (LibStyle.width - 84) / 4

  return (
    <View style={[{ margin: 5, borderRadius: 5, padding: 10, backgroundColor: 'white' }, LibStyle.elevation(2)]} >
      <View style={{ flexDirection: 'row' }} >
        <LibPicture source={{ uri: props.image }} style={{ width: 25, height: 25 }} />
        <View style={{ marginHorizontal: 10, flex: 1 }} >
          <Text allowFontScaling={false} style={{ fontSize: 12, fontFamily: 'Arial' }} >{props.title}</Text>
          <View style={{ flexDirection: 'row' }} >
            <LibIcon name="map-marker" size={14} />
            <Text allowFontScaling={false} style={{ flex: 1, marginLeft: 3, fontSize: 10, fontFamily: 'Arial' }} >{props.location_name}</Text>
          </View>
        </View>
        <TouchableOpacity onPress={() => {
          LibNavigation.navigate<MarketMerchant_detailArgs>('market/merchant_detail', { url: props.url })
        }}
          style={{ height: 32, borderRadius: 20, backgroundColor: MarketStyle.colorPrimaryMarket, paddingHorizontal: 15, justifyContent: 'center' }} >
          <LibTextstyle textStyle='footnote' text={esp.lang("market/merchant_favorite_item", "show_merchant")} style={{ color: '#f1f1f1' }} />
        </TouchableOpacity>
      </View>
      <LibBlock
        url={"shop/product_list?merchant_id=" + props.id + "&limit=4"}
        render={(row) => {
          return (
            <View style={{ flexDirection: "row", paddingVertical: 10 }} >
              {
                row.list.map((item2: any, i2: number) => (
                  <TouchableOpacity key={i2} activeOpacity={1} onPress={() => LibNavigation.navigate('market/product_detail', { url: item2.url })} style={{ width: itemWidth, height: itemWidth, borderRadius: 5, marginRight: 10, backgroundColor: '#d1d1d1' }} >
                    <LibPicture
                      source={{ uri: item2.image }}
                      style={{ width: itemWidth, height: itemWidth, borderRadius: 5, marginRight: 10, backgroundColor: '#d1d1d1' }}
                    />
                  </TouchableOpacity>
                ))
              }
            </View>
          )
        }}
        ErrorView={(x) => {
          return (
            <View />
          )
        }}
      />
    </View>)
}