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


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 { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/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 { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketFreload } from 'esoftplay/cache/market/freload/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInput_select } from 'esoftplay/cache/market/input_select/import';
import { MarketProduct_itemProps } from 'esoftplay/cache/market/product_item/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';

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


export interface MarketMerchant_label_productArgs {
  id: string,
  title: string,
  image: string,
  total: number
}

export interface MarketMerchant_label_productProps {

}
export default function m(props: MarketMerchant_label_productProps): any {
  const args = LibNavigation.getArgsAll<MarketMerchant_label_productArgs>(props)
  const { id, title, image, total } = args
  const [data, setData] = useSafeState([])
  let products = useRef<any[]>([]).current
  const [reloader, key] = MarketFreload()

  useEffect(() => {
    products = data.map((x: any) => x.id)
  }, [data])

  function add(id: string, product_ids: (string | number)[]) {
    new LibCurl('shop/merchant_label_product_add', { id: id, product_ids: JSON.stringify(product_ids) }, reloader, (msg) => LibToastProperty.show(msg?.message))
  }

  function del(id: string, product_id: string) {
    LibDialog.warningConfirm(esp.lang("market/merchant_label_product", "delete_title"), esp.lang("market/merchant_label_product", "delete_msg"), esp.lang("market/merchant_label_product", "delete_confirm"), () => {
      new LibCurl('shop/merchant_label_product_del', { id: id, product_id: product_id }, () => {
        setData((t: any) => t?.filter((x: any) => x.id != product_id))
        LibToastProperty.show(esp.lang("market/merchant_label_product", "delete_ok"))
      }, (msg) => LibToastProperty.show(msg?.message))
    }, esp.lang("market/merchant_label_product", "delete_cancel"), () => { })
  }

  function renderItems(itm: MarketProduct_itemProps, idx: number) {
    return (
      <View key={idx} style={styleId_101Gqg} >
        <LibPicture source={{ uri: itm.image }} style={styleId_9Qyfv} />
        <View style={styleId_Z1CMiM9} >
          <LibTextstyle text={itm.title} textStyle="footnote" style={{ color: '#888' }} />
          <LibTextstyle text={LibUtils.money(itm.price)} textStyle="footnote" style={styleId_Z2mCmbA} />
        </View>
        <TouchableOpacity
          onPress={() => { del(id, itm.id) }}
          style={styleId_Zkxxg6} >
          <LibIcon name="delete" color={LibStyle.colorRed} size={16} />
        </TouchableOpacity>
      </View>
    )
  }

  return (
    <LibKeyboard_avoid style={styleId_ZcMJmd} >
      <MarketHeader leftIcon={{ name: "close", onPress: () => LibNavigation.back() }} title={esp.lang("market/merchant_label_product", "header_title")} />
      <LibInfinite
        key={key}
        url={"shop/merchant_label_product?id=" + id}
        injectData={data}
        onDataChange={setData}
        ListHeaderComponent={
          <>
            <MarketInput_select
              label={esp.lang("market/merchant_label_product", "display_label")}
              placeholder={esp.lang("market/merchant_label_product", "placeholder")}
              value={title}
              onPress={() => {
                LibNavigation.navigate('market/merchant_label_add', { ...args })
              }}
            />
            <LibTextstyle textStyle="footnote" text={esp.lang("market/merchant_label_product", "display_info")} style={styleId_Z1VJBYb} />

            <MarketSection_menu
              title={esp.lang("market/merchant_label_product", "product_in")}
              rightText={esp.lang("market/merchant_label_product", "total_product", String(data?.length))}
            // rightView={
            //   <TouchableOpacity
            //     onPress={() => { LibNavigation.navigateForResult("market/merchant_product_list", { def_product_ids: products }, 632).then((v) => { add(id, v) }) }}
            //     style={{ flexDirection: "row", alignItems: 'center' }} >
            //     <LibTextstyle textStyle="footnote" text={"Tambah Produk"} style={{ color: MarketStyle.colorGreen, marginRight: 3 }} />
            //     <LibIcon name="plus" size={10} color={MarketStyle.colorGreen} />
            //   </TouchableOpacity>
            // }
            />

            <MarketButton
              text={esp.lang("market/merchant_label_product", "btn_add")}
              colorBackground={"white"}
              colorBorder={"#9b9b9b"}
              color={"#9b9b9b"}
              icon={"plus-circle"}
              iconSize={16}
              buttonStyle={styleId_1DLJ8d}
              textStyle={styleId_Z2mCmbA}
              onPress={() => {
                LibNavigation.navigateForResult("market/merchant_product_list", { def_product_ids: products, url: "shop/merchant_label_product_search?id=" + id }, 632).then((v) => { add(id, v) })
              }} />

          </>
        }
        errorView={(e: string) => (<MarketEmpty msg={e} />)}
        renderItem={renderItems}
      />
    </LibKeyboard_avoid>
  )
}
const styleId_101Gqg: any = { paddingHorizontal: 17, flexDirection: 'row', alignItems: 'center', marginBottom: 0, backgroundColor: "white" }
const styleId_9Qyfv: any = { height: 55, width: 55, borderRadius: 4, backgroundColor: "#f1f2f3", marginRight: 10, marginVertical: 10 }
const styleId_Z1CMiM9: any = { flex: 1, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: "#f9f9f9" }
const styleId_Z2mCmbA: any = { fontSize: 14 }
const styleId_Zkxxg6: any = { marginLeft: 10 }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_Z1VJBYb: any = { fontSize: 10, marginHorizontal: 17, color: "#A8A7B8", marginTop: -5 }
const styleId_1DLJ8d: any = { marginHorizontal: 17, marginVertical: 5, borderRadius: 20, marginTop: 10 }