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

import { LibCurl } from 'esoftplay/cache/lib/curl/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 { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketMerchant_detailArgs } from 'esoftplay/cache/market/merchant_detail/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UserClass } from 'esoftplay/cache/user/class/import';

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


export interface MarketProduct_detail_merchantProps {
  image: string,
  location_name: string,
  merchant_id: string,
  title: string,
  user_id: string,
  followed: 0 | 1,
  onChangeFollow: (follow: 0 | 1) => void
}

/*
"image": "http://api.test.bbo.co.id/images/modules/shop/merchant/1/1713835302.jpg",
"location_name": "2 X 11 Enam Lingkung, Padang Pariaman, Sumatera Barat - Indonesia",
"merchant_id": "1",
"title": "BigBang Merchant",
"user_id": "1",

    */
export default function m(props: MarketProduct_detail_merchantProps): any {
  const userMerchant_id = UserClass.state().get()?.merchant_id
  function followMerchant(merchant_id: string, follow: 0 | 1) {
    let url = follow == 1 ? 'shop/merchant_favorite_remove' : 'shop/merchant_favorite_add'
    new LibCurl(url, { merchant_id: merchant_id },
      (res, msg) => {
        props.onChangeFollow(follow == 1 ? 0 : 1)
      }, (err) => {
        LibToastProperty.show(err?.message)
      }
    )
  }

  return (
    <>
      <TouchableOpacity onPress={() => LibNavigation.navigate<MarketMerchant_detailArgs>('market/merchant_detail', { url: 'shop/merchant_detail/' + props.merchant_id })} style={{ padding: 17, flexDirection: 'row', alignItems: "flex-start" }} >
        <LibPicture source={{ uri: props.image }} style={{ height: 40, width: 40, borderRadius: 5 }} />
        <View style={{ flex: 1, marginLeft: 10 }} >
          <LibTextstyle text={props.title} textStyle="callout" />
          <LibTextstyle text={props.location_name} textStyle={'caption1'} style={{ color: "#888" }} />
          {/* <View style={{ flexDirection: "row"}} > */}
          {/* <LibIcon.SimpleLineIcons name="location-pin" size={12} color="#888" /> */}
          {/* </View> */}
          {/* <View style={{ flexDirection: "row" }} >
            <View style={{ flexDirection: "row", alignItems: 'center', borderRadius: 6, backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.1), paddingHorizontal: 4, paddingVertical: 2 }} >
              <LibIcon name='star' color="gold" size={12} />
              <LibTextstyle text="4.5" textStyle="caption1" style={{ marginLeft: 4 }} />
            </View>
          </View> */}
        </View>
        {
          userMerchant_id && (userMerchant_id != props.merchant_id) ?
            <TouchableOpacity onPress={() => followMerchant(props.merchant_id, props.followed)} style={{ flexDirection: 'row', alignItems: 'center', borderRadius: 6, paddingVertical: 4, backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.1), paddingHorizontal: 15 }} >
              {
                props.followed == 1 &&
                <LibIcon name="close" size={14} style={{ marginRight: 5 }} />
              }
              <LibTextstyle textStyle="footnote" text={esp.lang("market/product_detail_merchant", "favorit")} />
            </TouchableOpacity>
            :
            null
        }
      </TouchableOpacity>
      {/* <View style={{ padding: 17, paddingTop: 0, flexDirection: 'row', alignItems: "flex-start" }} >
        <View style={{ flex: 1 }} >
          <LibTextstyle text="15%" textStyle="body" />
          <LibTextstyle text="Respone Rate" textStyle="caption1" style={{ color: "#888" }} />
        </View>
        <View style={{ flex: 1, alignItems: "center" }} >
          <LibTextstyle text="15%" textStyle="body" />
          <LibTextstyle text="Respone Rate" textStyle="caption1" style={{ color: "#888" }} />
        </View>
        <View style={{ flex: 1, alignItems: "flex-end" }} >
          <LibTextstyle text="15%" textStyle="body" />
          <LibTextstyle text="Respone Rate" textStyle="caption1" style={{ color: "#888" }} />
        </View>
      </View> */}
    </>
  )
}