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


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibFocus } from 'esoftplay/cache/lib/focus/import';
import { LibList } from 'esoftplay/cache/lib/list/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketDevice_type } from 'esoftplay/cache/market/device_type/import';
import { MarketMerchant_detail_product_listArgs } from 'esoftplay/cache/market/merchant_detail_product_list/import';
import { MarketMerchant_product_item } from 'esoftplay/cache/market/merchant_product_item/import';
import { MarketProduct_item } from 'esoftplay/cache/market/product_item/import';
import { MarketProduct_listArgs } from 'esoftplay/cache/market/product_list/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UserClass } from 'esoftplay/cache/user/class/import';

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


export interface MarketMerchant_detail_productArgs {

}
export interface MarketMerchant_detail_productProps {
  merchant: any
  vouchers?: any
}
export default function m(props: MarketMerchant_detail_productProps): any {
  const user = UserClass.state().get()
  const dimension = MarketDevice_type(2, 4, 5)

  const imgDimension = (LibStyle.width - ((dimension + 1) * 10)) / dimension
  const [productList, setProductList] = useSafeState<any>()
  const [error, setError] = useSafeState('')


  function getProduct() {
    new LibCurl("shop/product_list?merchant_id=" + props?.merchant?.id + "?page=0", null,
      (res) => {
        setProductList(res)
      }, (msg) => {
        setError(msg?.message)
      }, 1
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <LibFocus onFocus={getProduct} />
      <LibList
        data={productList?.list}
        numColumns={(esp.isDebug('') && user?.id == props.merchant?.user_id) ? undefined : dimension}
        ListEmptyComponent={
          error != '' ?
            <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 60 }} >
              <LibPicture source={esp.assets('market/ic_product_empty.png')} style={{ width: 150, height: 150 }} resizeMode={'contain'} />
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, textAlign: "center", color: "#03192a" }} >{esp.lang("market/merchant_detail_product", "empty_product")}</Text>
              {
                (user?.id == props.merchant?.user_id) &&
                <MarketButton onPress={() => { LibNavigation.navigate('market/product_add') }} text={esp.lang("market/merchant_detail_product", "add_product")} textStyle={{ color: "white", fontSize: 12, fontWeight: 'bold' }} buttonStyle={{ borderRadius: 20, marginHorizontal: 55, marginVertical: 10 }} />
              }
            </View>
            : null
        }
        ListFooterComponent={
          <>
            {
              LibUtils.checkUndefined(productList, 'pages') && productList.pages > 1 &&
              <TouchableOpacity onPress={() => {
                (esp.isDebug('') && user?.id == props.merchant?.user_id) ?
                  LibNavigation.push<MarketMerchant_detail_product_listArgs>('market/merchant_detail_product_list', { title: esp.lang("market/merchant_detail_product", "all"), url: 'shop/product_list?merchant_id=' + props.merchant.id })
                  :
                  LibNavigation.push<MarketProduct_listArgs>('market/product_list', { title: esp.lang("market/merchant_detail_product", "all_prod"), url: 'shop/product_list?merchant_id=' + props.merchant.id })
              }} style={{ alignSelf: "center", margin: 15, backgroundColor: MarketStyle.colorPrimaryMarket, paddingHorizontal: 10, paddingVertical: 3, borderRadius: 5 }} >
                <LibTextstyle text={esp.lang("market/merchant_detail_product", "show")} textStyle="footnote" style={{ color: "white" }} />
              </TouchableOpacity>
            }
          </>
        }
        style={{ marginBottom: 20, marginTop: 10 }}
        renderItem={(product: any, i: number) => {
          if (esp.isDebug('') && user?.id == props.merchant?.user_id) {
            return <MarketMerchant_product_item {...product} key={i} onDelete={() => {
              setProductList((x: any) => LibObject.splice(x, i, 1)("list"))
            }} />
          } else {
            return <MarketProduct_item {...product} key={i} width={imgDimension} onChangeWish={(c) => {
              setProductList((x: any) => LibObject.set(x, c)("list", i, 'wishlist'))
            }} />
          }
        }}
      />
    </View>
  )
}