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


import { LibCurl } from 'esoftplay/cache/lib/curl/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 { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/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 { MarketOrder_detailArgs } from 'esoftplay/cache/market/order_detail/import';
import { MarketPayment_list } from 'esoftplay/cache/market/payment_list/import';

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


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

export interface MarketCheckout_payment_methodProps {

}

export default function m(props: MarketCheckout_payment_methodProps): any {
  const { price, id, fee, from, order_id, codSupport, containPromo } = LibNavigation.getArgsAll<MarketCheckout_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 payMet: any = {
    2: esp.lang("market/checkout_payment_method", "text_mitra"),
    4: "",
    1: esp.lang("market/checkout_payment_method", "text_transfer"),
    6: ""
  }
  const scrollRef = useRef<ScrollView>(null)

  useEffect(() => {
    esp.log(price, id, from, order_id, fee, containPromo);
    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
  }, [])

  function changePaymentMethod(pin?: string) {
    if (getPaymentId() == 2 && !pin) {
      LibNavigation.navigateForResult("market/payment_pin", undefined, 1132).then((p) => {
        if (p) {
          changePaymentMethod(p)
        }
      })
      return
    }
    let post = {
      payment_id: getPaymentId(),
      pin: pin || ""
    }
    new LibCurl("shop/order_detail_payment_change/" + order_id, post,
      (res) => {
        LibNavigation.backToRoot()
        LibNavigation.navigate('market/order')
        LibNavigation.navigate<MarketOrder_detailArgs>('market/order_detail', { url: res.url })
      }, (err) => {
        LibToastProperty.show(err?.message)
      }, 1
    )
  }

  return (
    <View style={styleId_ZcMJmd} >
      <MarketHeader
        leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}
        title={esp.lang("market/checkout_payment_method", "header_title")}
      />
      <View style={styleId_Z6tUsI} >
        <View style={styleId_2hmYYz} >
          <LibTextstyle textStyle='callout' text={esp.lang("market/checkout_payment_method", "bill_total")} />
          <LibTextstyle textStyle='callout' text={LibUtils.money(price)} />
        </View>
        <View style={styleId_2hmYYz} >
          <LibTextstyle textStyle='callout' text={esp.lang("market/checkout_payment_method", "payment_charge")} />
          <LibTextstyle textStyle='callout' text={LibUtils.money(charge)} />
        </View>
        <View style={styleId_28jHKd} >
          <LibTextstyle textStyle='callout' text={esp.lang("market/checkout_payment_method", "payment_total")} />
          <LibTextstyle textStyle='callout' text={LibUtils.money(Number(price) + Number(charge))} style={styleId_aDTfH} />
        </View>
      </View>
      <ScrollView ref={scrollRef}>
        <MarketPayment_list
          orderType={containPromo ? marketConfig?.order_type?.promo_fs : marketConfig?.order_type?.shop}
          onPressPayment={(d) => {
            setData({ ...d, method: payMet[d.type] })
            setPaymentId(d.id)
            setCharge(d.charge)
          }}
          payment_id={paymentId}
          price={price}
          charge={charge}
          codSupport={codSupport}
          onToggleCC={() => {
            scrollRef.current?.scrollToEnd({ animated: true })
          }}
        />
      </ScrollView>
      <View pointerEvents={!data ? "none" : "auto"} style={styleId_155Sf5} >
        <MarketButton
          colorBackground={!data ? "#aaa" : undefined}
          text={esp.lang("market/checkout_payment_method", "select_payment_method")}
          textStyle={styleId_21Duj3}
          onPress={() => {
            if (from == "market/order_detail") {
              changePaymentMethod()
            } else {
              LibNavigation.sendBackResult(data, LibNavigation.getResultKey(props))
            }
          }} />
      </View>
    </View>
  )
}
const styleId_ZcMJmd: any = { flex: 1 }
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 }
const styleId_21Duj3: any = { color: 'white' }