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


import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/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 { MarketCheckout_payment_methodArgs } from 'esoftplay/cache/market/checkout_payment_method/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketStep } from 'esoftplay/cache/market/step/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketPaymentDetailArgs {
  url: string
}
export interface MarketPaymentDetailProps {

}
export default function m(props: MarketPaymentDetailProps): any {
  const { url } = LibNavigation.getArgsAll<any>(props)
  const [data, setData] = useSafeState<any>()

  useEffect(() => {
    getData()
  }, [])

  function getData() {
    new LibCurl(url, null,
      (res) => {
        if (res.payment_id == 0) {
          LibNavigation.replace<MarketCheckout_payment_methodArgs>('market/checkout_payment_method', { price: (Number(res.shipping) + Number(res.total)), order_id: res.id, from: 'market/order_detail' })
        } else {
          new LibCurl(res.payment_url, null,
            (result) => {
              setData(result)
            }, (msg) => { }, 1
          )
        }
      }, (msg) => {
        esp.log(msg?.message);
      }
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={esp.lang("market/payment_detail", "header_title")} onlyBack />
      {/* <MarketSection_menu title="Metode Pembayaran" /> */}
      {
        !data ? <LibLoading /> :
          <LibScroll>
            <LibTextstyle textStyle={"footnote"} text={esp.lang("market/payment_detail", "selected_method")} style={{ marginHorizontal: 15, marginTop: 15 }} />
            <View style={{ flex: 1, flexDirection: "row", alignItems: "center", marginHorizontal: 15 }} >
              {
                LibUtils.checkUndefined(data, "payment.payment_id") &&
                <LibPicture source={{ uri: data?.payment?.image }} style={{ width: 55.7, height: 40, marginRight: 5 }} resizeMode="contain" />
              }
              <LibTextstyle textStyle={"callout"} text={data?.payment?.payment_name} />
            </View>
            {
              LibUtils.checkUndefined(data, "params.expired") &&
              <View style={{ marginHorizontal: 15 }} >
                <LibTextstyle textStyle={"footnote"} text={data?.params?.va_no ? esp.lang("market/payment_detail", "va_number") : esp.lang("market/payment_detail", "bill_number")} style={{ marginTop: 10 }} />
                <View style={{ flexDirection: "row", alignItems: "center", marginTop: 10 }} >
                  <Text allowFontScaling={false} style={{ flex: 1, fontSize: 20, fontWeight: "bold", color: MarketStyle.colorPrimaryMarket }} >{data?.params?.va_no || data?.params?.cvs_no}</Text>
                  <TouchableOpacity style={{ alignItems: "center", justifyContent: 'center', flexDirection: "row" }}
                    onPress={() => {
                      LibUtils.copyToClipboard(data?.params?.va_no || data?.params?.cvs_no).then(() => LibToastProperty.show(esp.lang("market/payment_detail", "copied")))
                    }} >
                    <LibIcon name="content-copy" style={{ color: '#2e83bb' }} size={14} />
                    <LibTextstyle textStyle={"footnote"} text={esp.lang("market/payment_detail", "copy")} style={{ color: '#2e83bb', marginLeft: 5 }} />
                  </TouchableOpacity>
                </View>
                <LibTextstyle textStyle={"footnote"} text={esp.lang("market/payment_detail", "check_time")} style={{ marginVertical: 10, fontSize: 12 }} />
              </View>
            }
            {
              !!data?.payment?.description &&
              Object.keys(data?.payment?.description).map((key: any, i: number) => {
                let leng = (Object.keys(data?.payment?.description).length) - 1
                let imgBank = ''
                let keyT = ''
                if (key == "atm") {
                  imgBank = 'market/ic_atm.png'
                  keyT = esp.lang("market/payment_detail", "transfer_atm")
                } else if (key == "internet") {
                  imgBank = 'market/ic_ibank.png'
                  keyT = esp.lang("market/payment_detail", "transfer_bank")
                } else if (key == "mitra") {
                  imgBank = 'market/ic_ibank.png'
                  keyT = esp.lang("market/payment_detail", "transfer_motra")
                } else if (key == "mobile") {
                  imgBank = 'market/ic_mbank.png'
                  keyT = esp.lang("market/payment_detail", "transfer_mbank")
                } else {
                  imgBank = 'market/ic_mbank.png'
                  keyT = esp.lang("market/payment_detail", "tansfer")
                }
                if (data.payment.description[key].length > 1) {
                  return (
                    <LibCollaps key={i} show={i == leng} header={(show) =>
                      <View style={[{ marginHorizontal: 15, borderRadius: 5, marginVertical: 5, padding: 12, justifyContent: 'space-between', flexDirection: 'row', backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
                        <View style={{ flex: 7, alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
                          <LibPicture source={esp.assets(imgBank)} style={{ width: 20, height: 20 }} resizeMode="cover" />
                          <Text allowFontScaling={false} ellipsizeMode={"middle"} numberOfLines={1} style={{ marginLeft: 10, marginRight: 10, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }}>{keyT}</Text>
                        </View>
                        <LibIcon name={show ? 'chevron-up' : 'chevron-down'} color="#4a4a4a" />
                      </View>}>
                      {
                        data.payment.description[key].length > 0 && data.payment.description[key].map((item: any, i: number) => {
                          return (
                            <View key={i} style={{ marginHorizontal: 15 }} >
                              <MarketStep text={item} />
                            </View>
                          )
                        })
                      }
                    </LibCollaps>
                  )
                } else {
                  return null
                }
              })
            }
          </LibScroll>
      }
    </View>
  )
}