// 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 { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/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 { MarketAds_deposit_detailArgs } from 'esoftplay/cache/market/ads_deposit_detail/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketConfigProperty } from 'esoftplay/cache/market/config/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketPayment_list } from 'esoftplay/cache/market/payment_list/import';

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


export interface MarketAds_deposit_payment_methodArgs {
  price: number,
  id?: number,
  from?: string,
  order_id?: number,
  fee?: number
  codSupport?: boolean
}
export interface MarketAds_deposit_payment_methodProps {

}
export default function m(props: MarketAds_deposit_payment_methodProps): any {
  const { price, id, fee, from, order_id, codSupport } = LibNavigation.getArgsAll<MarketAds_deposit_payment_methodArgs>(props)
  const marketConfig = MarketConfigProperty.state().get()
  const [paymentId, setPaymentId, getPaymentId] = useSafeState(id)
  const [charge, setCharge] = useSafeState(fee || 0)
  const [data, setData] = useSafeState()
  const scrollRef = useRef<ScrollView>(null)

  function doTopUp(pin?: string) {
    if (getPaymentId() == 2 && !pin) {
      LibNavigation.navigateForResult("market/payment_pin", undefined, 5554).then((p) => {
        if (p) {
          doTopUp(p)
        }
      })
      return
    }

    let post = {
      amount: LibUtils.numberAbsolute(price),
      payment_id: getPaymentId(),
      pin: pin || ""
    }

    LibProgress.show(esp.lang("market/ads_deposit_payment_method", "deposit_waiting"))
    new LibCurl("advert/deposit", post,
      (res, msg) => {
        LibProgress.hide()
        LibNavigation.backToRoot()
        LibDialog.info(esp.lang("market/ads_deposit_payment_method", "deposit_ok"), msg)
        LibNavigation.navigate<MarketAds_deposit_detailArgs>('market/ads_deposit_detail', { url: res.url })
      }, (err) => {
        LibProgress.hide()
        LibDialog.warning(esp.lang("market/ads_deposit_payment_method", "deposit_failed"), err?.message)
      }, 1
    )
  }

  function changePaymentMethod(pin?: string) {
    if (getPaymentId() == 2 && !pin) {
      LibNavigation.navigateForResult("market/payment_pin", undefined, 5554).then((p) => {
        if (p) {
          doTopUp(p)
        }
      })
      return
    }

    let post = {
      amount: LibUtils.numberAbsolute(price),
      payment_id: getPaymentId(),
      pin: pin || ""
    }

    LibProgress.show(esp.lang("market/ads_deposit_payment_method", "change_payment_waiting"))
    new LibCurl("advert/deposit_list_detail_payment/" + order_id, post,
      (res, msg) => {
        LibProgress.hide()
        LibNavigation.backToRoot()
        LibDialog.info(esp.lang("market/ads_deposit_payment_method", "change_payment_ok"), msg)
        LibNavigation.navigate<MarketAds_deposit_detailArgs>('market/ads_deposit_detail', { url: res.url })
      }, (err) => {
        LibProgress.hide()
        LibDialog.warning(esp.lang("market/ads_deposit_payment_method", "change_payment_failed"), err?.message)
      }, 1
    )
  }


  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}
        title={esp.lang("market/ads_deposit_payment_method", "header_title")}
      />
      <View style={styleId_Z6tUsI} >
        <View style={styleId_2hmYYz} >
          <LibTextstyle textStyle='callout' text={esp.lang("market/ads_deposit_payment_method", "bill_total")} />
          <LibTextstyle textStyle='callout' text={LibUtils.money(price)} />
        </View>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }} >
          <LibTextstyle textStyle='callout' text={esp.lang("market/ads_deposit_payment_method", "change_paymenr")} />
          <LibTextstyle textStyle='callout' text={LibUtils.money(charge)} />
        </View>
        <View style={styleId_28jHKd} >
          <LibTextstyle textStyle='callout' text={esp.lang("market/ads_deposit_payment_method", "total_payment")} />
          <LibTextstyle textStyle='callout' text={LibUtils.money(Number(price) + Number(charge))} style={styleId_aDTfH} />
        </View>
      </View>
      <ScrollView ref={scrollRef}>
        <MarketPayment_list
          orderType={marketConfig?.order_type?.advert}
          onPressPayment={(d) => {
            setData(d)
            setPaymentId(d.id)
            setCharge(d.charge)
          }}
          payment_id={paymentId}
          price={price}
          charge={charge}
          codSupport={codSupport}
          onToggleCC={() => {
            scrollRef.current?.scrollToEnd({ animated: true })
          }}
        />
        <View />
      </ScrollView>
      <View pointerEvents={!data ? "none" : "auto"} style={styleId_155Sf5} >
        <MarketButton
          colorBackground={!data ? "#aaa" : undefined}
          text={esp.lang("market/ads_deposit_payment_method", "btn_pay")}
          textStyle={{ color: 'white' }}
          onPress={() => {
            if (from == 'market/ads_deposit') {
              changePaymentMethod()
            } else {
              doTopUp()
            }
          }} />
      </View>
    </View>
  )
}
const styleId_Z6tUsI: any = { backgroundColor: 'white', marginHorizontal: 17, marginVertical: 10, borderRadius: 6, padding: 12, ...LibStyle.elevation(2) }
const styleId_2hmYYz: any = { flexDirection: 'row', justifyContent: 'space-between' }
const styleId_28jHKd: any = { flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: 1, borderTopColor: '#ccc', paddingTop: 10, marginTop: 10 }
const styleId_aDTfH: any = { fontWeight: 'bold' }
const styleId_155Sf5: any = { paddingHorizontal: 17, marginTop: 4, marginBottom: 8 }