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


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 { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketEmpty_product } from 'esoftplay/cache/market/empty_product/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketPromotion_productArgs } from 'esoftplay/cache/market/promotion_product/import';
import { MarketPromotion_product_item } from 'esoftplay/cache/market/promotion_product_item/import';
import { MarketPromotion_product_selectedArgs } from 'esoftplay/cache/market/promotion_product_selected/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketPromotion_product_registerArgs {
  promo_id: string,
  promo: any,
  product_cat_id: string
}
export interface MarketPromotion_product_registerProps {

}
export default function m(props: MarketPromotion_product_registerProps): any {
  const { promo_id, promo, product_cat_id } = LibNavigation.getArgsAll<any>(props)
  const [upData, setUpData, getUpData] = useSafeState<any>()

  function addNewProduct() {
    LibNavigation.navigateForResult<MarketPromotion_productArgs>('market/promotion_product', { promo: promo, product_id: upData?.map((x: any) => x.id) }, 3219).then((val: any) => {
      let data: any = []
      const old = getUpData().map((x: any) => x.id)
      for (let i = 0; i < val.length; i++) {
        if (!old.includes(val[i].id)) {
          data.push(val[i])
        }
      }
      setUpData((u) => LibObject.push(u, ...data)())
    })
  }

  function deleteProduct(index: number) {
    LibDialog.warningConfirm(esp.lang("market/promotion_product_register", "delete_title"), esp.lang("market/promotion_product_register", "delete_msg"), esp.lang("market/promotion_product_register", "delete_confirm"), () => {
      setUpData((t) => LibObject.splice(t, index, 1)())
    }, esp.lang("market/promotion_product_register", "delete_cancel"), () => { })
  }

  function renderItems(item: any, i: number) {
    return (
      <MarketPromotion_product_item {...item} stocks={undefined} sold={undefined} promo={undefined} key={i} onDelete={() => deleteProduct(i)} />
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={esp.lang("market/promotion_product_register", "header_title")} onlyBack />

      <View style={{ marginHorizontal: 15, marginTop: 10, marginBottom: 5, flexDirection: 'row' }} >
        <View style={{ flex: 1 }} >
          <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', fontSize: 14 }} >{esp.lang("market/promotion_product_register", "select_promo_product")}</Text>
          <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', marginTop: 5, fontSize: 11, color: '#999' }} >{esp.lang("market/promotion_product_register", "max_product", String(upData?.length || 0), promo.merchant_product)}</Text>
        </View>
        <TouchableOpacity onPress={() => { addNewProduct() }} >
          <LibIcon name="plus-box-outline" />
        </TouchableOpacity>
      </View>

      <LibInfinite
        url={promo.product_registered}
        isDebug={1}
        injectData={upData}
        ListEmptyComponent={() => (
          <>
            <MarketEmpty_product message={esp.lang("market/promotion_product_register", "product_not_select")} style={{ fontSize: 14 }} />
            <MarketButton
              onPress={() => { addNewProduct() }}
              text={esp.lang("market/promotion_product_register", "select_product")}
              textStyle={{ color: 'white', fontSize: 14, }}
              colorBackground={/* '#d1d1d1' : */ MarketStyle.colorPrimaryMarket}
              buttonStyle={{ margin: 10, borderRadius: 20, width: 150, alignSelf: 'center' }}
            />
          </>
        )}
        onDataChange={setUpData}
        renderItem={renderItems}
      />
      <MarketButton
        onPress={() => {
          if ((upData?.length || 0) > 0) {
            LibNavigation.navigate<MarketPromotion_product_selectedArgs>('market/promotion_product_selected', { products: upData, promo: promo, promo_id: promo_id, product_cat_id: product_cat_id })
          }
        }}
        text={esp.lang("market/promotion_product_register", "next_btn")}
        textStyle={{ color: 'white' }}
        colorBackground={(upData?.length || 0) > 0 ? MarketStyle.colorPrimaryMarket : '#d1d1d1'}
        buttonStyle={{ margin: 10, borderRadius: 20 }}
      />
    </View>
  )
}