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


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 { 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 { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketMerchant_shipping_data } from 'esoftplay/cache/market/merchant_shipping_data/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketToggle } from 'esoftplay/cache/market/toggle/import';

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


export interface MarketMerchant_product_shippingProps {

}

export default function m(props: MarketMerchant_product_shippingProps): any {
  const { courier_ids } = LibNavigation.getArgsAll<any>(props)
  const [data, setData, update] = MarketMerchant_shipping_data()
  const [sCourier, setSCourier, getSCourier] = useSafeState<string[]>(courier_ids && courier_ids.map(String) || [])



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

  const usedCouriers = data && data?.filter((x) => x.used == 1)

  function toggle(id: string) {
    let out: string[] = []
    if (getSCourier().includes(id))
      out = getSCourier().filter((x) => x != id)
    if (!getSCourier().includes(id))
      out = [...getSCourier(), id]
    setSCourier(out)
  }

  return (
    <View style={{ flex: 1 }} >
      <LibFocus onFocus={update} />
      <MarketHeader title={esp.lang("market/product_shipping", "header_title")} leftIcon={{ name: "close", onPress: () => LibNavigation.back() }} />
      <LibList
        onRefresh={update}
        data={usedCouriers}
        extraData={usedCouriers}
        ListEmptyComponent={
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', minHeight: LibStyle.height - LibStyle.STATUSBAR_HEIGHT }} >
            <MarketEmpty msg={esp.lang("market/product_shipping", "empty")} />
          </View>
        }
        renderItem={(item: MarketMerchant_shipping_data, index) => (
          <>
            <MarketSection_menu title={item.title} />
            <View style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: "row", alignItems: "center" }} >
              <View style={{ flex: 1 }} >
                <LibTextstyle textStyle="caption1" text={esp.lang("market/product_shipping", "estimate")} />
                <LibTextstyle textStyle="body" text={item.estimate_cost == '' ? '-' : LibUtils.money(item.estimate_cost)} />
              </View>
              <MarketToggle /* disabled={item.estimate_cost == ''} */ value={sCourier.includes(item.id)} type="success" onChangeValue={() => { toggle(item.id) }} />
            </View>
          </>
        )}
      />
      {
        usedCouriers.length > 0 ?
          <MarketButton
            text={esp.lang("market/product_shipping", "btn_save")}
            textStyle={{ color: 'white' }}
            buttonStyle={{ marginBottom: 10, marginHorizontal: 17 }}
            onPress={() => { LibNavigation.sendBackResult(sCourier, LibNavigation.getResultKey(props)) }}
          />
          :
          <MarketButton
            text={esp.lang("market/product_shipping", "btn_add")}
            buttonStyle={{ marginBottom: 10, marginHorizontal: 17 }}
            onPress={() => { LibNavigation.navigate('market/merchant_shipping') }}
          />
      }
    </View>
  )
}