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

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 { 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 { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketMerchant_voucher_inputProperty } from 'esoftplay/cache/market/merchant_voucher_input/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UserClass } from 'esoftplay/cache/user/class/import';

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


export interface MarketMerchant_voucher_productArgs {

}
export interface MarketMerchant_voucher_productProps {

}
export default function m(props: MarketMerchant_voucher_productProps): any {
  const user = UserClass.state().get()
  const { voucher_id } = LibNavigation.getArgsAll<any>(props)
  const [selectedProduct, setSelectedProduct] = MarketMerchant_voucher_inputProperty.state().useState()

  let url = "shop/merchant_product?merchant_id=" + user?.merchant_id

  useEffect(() => {
    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
  }, [])

  function buildUrl(url: string): string {
    if (voucher_id) {
      url += url.includes('?') ? '&' : '?'
      url += 'voucher_id=' + voucher_id
    }
    return url
  }

  function selectProducts(item: any, id: string) {
    let _item = [...MarketMerchant_voucher_inputProperty.state().get()]
    let index = _item.map((x: any) => x.id).indexOf(id)

    if (_item.some((x: any) => id == x.id)) {
      _item = LibObject.splice(_item, index, 1)()
    } else {
      _item = LibObject.push(_item, item)()
    }
    MarketMerchant_voucher_inputProperty.state().set([..._item])
  }

  function renderItems(item: any, i: number) {
    return (
      <View style={styleId_tmUR0}>
        <View style={styleId_15H7Gq}>
          <LibPicture
            source={{ uri: item.image }}
            style={styleId_Z1Y2Kpj} resizeMode="cover"
          />
          <View style={styleId_ZcMJmd} >
            <LibTextstyle
              numberOfLines={2}
              ellipsizeMode="tail"
              style={styleId_ZcFIEN}
              textStyle="caption1"
              text={item.title} />
            <View style={styleId_288dL4} >
              {
                item.sale != item.price &&
                <LibTextstyle
                  textStyle="footnote"
                  text={LibUtils.money(item.price, item.currency)}
                  style={styleId_ZTcDHg} />
              }
              <LibTextstyle
                textStyle="footnote"
                text={" " + LibUtils.money(item.sale, item.currency)}
                style={styleId_GW3Y7} />
            </View>
            {
              item.stocks &&
              <LibTextstyle
                numberOfLines={2}
                ellipsizeMode="tail"
                style={styleId_ZcFIEN}
                textStyle="caption1"
                text={esp.lang("market/merchant_voucher_product", "stock", LibUtils.number(item.stocks))} />
            }
            {
              item?.alert != '' && item?.alert != null &&
              <View style={styleId_17srzJ} >
                <View style={styleId_1LIVWf} >
                  <LibTextstyle
                    textStyle="footnote"
                    text={item.alert}
                    style={styleId_Z2mCSd6} />
                </View>
              </View>
            }
          </View>
          <TouchableOpacity onPress={() => {
            selectProducts(item, item.id)
          }} hitSlop={styleId_Ze7c1x}>
            <LibIcon name="trash-can-outline" />
          </TouchableOpacity>

        </View>
      </View>
    )
  }

  return (
    <View style={styleId_qpkod}>
      <MarketHeader onlyBack title={esp.lang("market/merchant_voucher_product", "header_title")} subtitle={esp.lang("market/merchant_voucher_product", "header_sub")} rightView={() => (
        <TouchableOpacity onPress={() => {
          LibNavigation.navigateForResult('market/merchant_voucher_product_list', 92).then((item) => {
            setSelectedProduct(item)
          })
        }} style={styleId_ZnTxdz} >
          <LibIcon name='plus-circle-outline' color={MarketStyle.colorPrimaryMarket} />
        </TouchableOpacity>
      )} />
      <LibInfinite
        url={buildUrl(url)}
        injectData={selectedProduct}
        onDataChange={(data: any, page: number) => { setSelectedProduct(data) }}
        style={{ marginHorizontal: 5 }}
        errorView={(e: string) => (<MarketEmpty msg={e} />)}
        renderItem={renderItems}
      />
      <View style={{ padding: 10, backgroundColor: '#fff' }}>
        {
          selectedProduct?.length > 0 &&
          <Text allowFontScaling={false} style={styleId_n3nql} >{esp.lang("market/merchant_voucher_product", "selected", String(selectedProduct?.length))}</Text>
        }

        <MarketButton onPress={() => {
          if (selectedProduct?.length > 0) {
            LibNavigation.sendBackResult(selectedProduct, 120)
          } else {
            LibToastProperty.show(esp.lang("market/merchant_voucher_product", "select_product"))
          }
        }} text={esp.lang("market/merchant_voucher_product", "btn_select")} />
      </View>

    </View>
  )
}
const styleId_tmUR0: any = { margin: 15, marginBottom: 0, backgroundColor: '#fff', borderRadius: 5, padding: 10, ...LibStyle.elevation(2) }
const styleId_15H7Gq: any = { flex: 1, overflow: "hidden", borderRadius: 5, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }
const styleId_Z1Y2Kpj: any = { marginRight: 10, height: 70, width: 70, borderRadius: 10, backgroundColor: '#f1f2f3' }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_ZcFIEN: any = { color: '#888' }
const styleId_288dL4: any = { flexDirection: 'row', alignItems: 'center', marginTop: 3, marginBottom: 5 }
const styleId_ZTcDHg: any = { textDecorationLine: 'line-through', textDecorationStyle: 'solid', color: '#707070' }
const styleId_GW3Y7: any = { fontWeight: "bold" }
const styleId_17srzJ: any = { flexDirection: 'row', flexWrap: 'wrap' }
const styleId_1LIVWf: any = { paddingVertical: 3, paddingHorizontal: 10, marginTop: 5, borderRadius: 5, backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.2) }
const styleId_Z2mCSd6: any = { fontSize: 10 }
const styleId_Ze7c1x: any = { top: 5, left: 5, bottom: 5, right: 5 }
const styleId_qpkod: any = { flex: 1, backgroundColor: '#fff' }
const styleId_ZnTxdz: any = { height: 50, justifyContent: 'center', paddingRight: 17 }
const styleId_n3nql: any = { marginVertical: 5, fontSize: 14, fontStyle: "normal", letterSpacing: 0 }