// withHooks

import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/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 { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';

import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import { useTimeout } from 'esoftplay/timeout';
import LottieView from "lottie-react-native";
import React, { useEffect, useRef } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import RenderHtml from 'react-native-render-html';


moment().locale('id')

export interface MarketAds_deposit_detailArgs {
  url: string
}
export interface MarketAds_deposit_detailProps {

}
export default function m(props: MarketAds_deposit_detailProps): any {
  const { url } = LibNavigation.getArgsAll(props)
  const [data, setData] = useSafeState<any>()
  const [msg, setMsg] = useSafeState<string>('')
  const timeout = useTimeout()

  const animation = useRef<LottieView>(null)

  useEffect(() => {
    if (data)
      timeout(() => {
        animation?.current?.play()
      }, 300)
  }, [data])


  useEffect(() => {
    new LibCurl(url, null,
      (res, msg) => {
        setData(res)
        setMsg(msg)
      }, (msg) => {
        LibDialog.warning(esp.lang("market/ads_deposit_detail", "get_data_failed"), msg?.message)
      }, 1
    )
  }, [])

  function renderDescriptionItem(item: any, i: number) {
    return (
      <View key={i} style={styleId_Z4DU9B} >
        <View style={styleId_21GLEo}>
          <Text allowFontScaling={false} style={styleId_Je65l} >{i + 1}</Text>
        </View>
        <View style={styleId_ZcMJmd} >
          <RenderHtml contentWidth={LibStyle.width} source={{ html: item }} />
        </View>
      </View>
    )
  }

  function renderPaymentDescription(key: any, i: number) {
    let imgBank = ''
    let keyT = ''
    if (key == "atm") {
      imgBank = 'market/ic_atm.png'
      keyT = esp.lang("market/ads_deposit_detail", "transfer_atm")
    } else if (key == "internet") {
      imgBank = 'market/ic_ibank.png'
      keyT = esp.lang("market/ads_deposit_detail", "transfer_ibank")
    } else if (key == "mobile") {
      imgBank = 'market/ic_mbank.png'
      keyT = esp.lang("market/ads_deposit_detail", "transfer_mbank")
    } else {
      imgBank = 'market/ic_mbank.png'
      keyT = esp.lang("market/ads_deposit_detail", "transfer_motra")
    }
    return (
      <LibCollaps key={i} show={i == 2} header={(show) => (
        <>
          <View style={styleId_Z13ukTA}>
            <View style={styleId_Z1PyeTT}>
              <LibPicture source={esp.assets(imgBank)} style={styleId_Lyx33} resizeMode="cover" />
              <Text allowFontScaling={false} ellipsizeMode={"middle"} numberOfLines={1} style={styleId_Zml5C0}>{keyT}</Text>
            </View>
            <LibIcon name={show ? 'chevron-up' : 'chevron-down'} color="#4a4a4a" />
          </View>
        </>
      )}>
        <View style={styleId_1txFsO}>
          {
            data.payment.description && data.payment.description.atm && data.payment.description[key].length > 0 && data.payment.description[key].map(renderDescriptionItem)
          }
        </View>
      </LibCollaps>
    )
  }

  return (
    <View style={styleId_ZcMJmd} >
      <MarketHeader title={esp.lang("market/ads_deposit_detail", "header_title")} onlyBack />
      {
        (!data || msg == '') ? <LibLoading /> :
          <LibScroll>
            {
              data.status == 2 ? //sukses
                <>
                  <View style={styleId_Z1vIsBm} >
                    <LottieView
                      ref={animation}
                      loop={false}
                      style={styleId_ZnsiNj}
                      source={esp.assets('market/success.json')}
                    // OR find more Lottie files @ https://lottiefiles.com/featured
                    // Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
                    />
                  </View>
                  <LibTextstyle text={data?.title} textStyle="headline" style={styleId_pVAGd} />
                  <LibTextstyle text={msg} textStyle="headline" style={styleId_1QKfTW} />

                  <View style={styleId_1WAFLr} >
                    <LibTextstyle text={esp.lang("market/ads_deposit_detail", "total_deposit")} textStyle="caption1" style={styleId_Z2mCmbA} />
                    <LibTextstyle text={LibUtils.money(Number(data?.amount), data?.currency)} textStyle="title3" style={styleId_1VKXmB} />
                  </View>
                </>
                : data.status == 1 ? //menunggu pembayaran
                  <>
                    <View style={styleId_1Tkdft} >
                      <LibTextstyle text={esp.lang("market/ads_deposit_detail", "expired_payment")} textStyle="caption1" style={styleId_1HHJzj} />
                      <View style={styleId_1fmvBo} >
                        <LibTextstyle text={moment(data?.exp_payment).localeFormat('dddd, DD MMMM YYYY H:mm:s')} textStyle="caption1" style={styleId_1dQx9h} />
                        <MarketCountdown expired={moment(data?.exp_payment).localeFormat('YYYY-MM-DD HH:mm:ss')} style={styleId_Z1wJs17} />
                      </View>
                    </View>

                    <View style={styleId_LapyN} />

                    <View style={styleId_1KynKh} >
                      {
                        LibUtils.checkUndefined(data, "payment.payment_type") &&
                        <View style={styleId_2dpQuM}>
                          <Text style={styleId_1A6QzH} >{data?.payment?.payment_name}</Text>
                          <LibPicture source={{ uri: data?.payment?.image }} style={styleId_ZoW7jY} resizeMode="contain" />
                        </View>
                      }

                      {
                        data?.payment?.payment_id != 2 &&
                        <View style={styleId_2tlMHb} >
                          <LibTextstyle text={data?.params?.va_no ? esp.lang("market/ads_deposit_detail", "va_number") : esp.lang("market/ads_deposit_detail", "bill_number")} textStyle="caption1" style={styleId_1HHJzj} />
                          <View style={styleId_Zrz44M}>
                            <LibTextstyle text={data?.params.va_no || data?.params?.cvs_no || esp.lang("market/ads_deposit_detail", "exp")} textStyle="caption1" style={styleId_Z2uIOw5} />
                            {
                              (data?.params?.va_no || data?.params?.cvs_no) &&
                              <TouchableOpacity onPress={() => {
                                if (data?.params?.va_no || data?.params?.cvs_no) {
                                  LibUtils.copyToClipboard(data?.params?.va_no || data?.params?.cvs_no).then(() => LibToastProperty.show(esp.lang("market/ads_deposit_detail", "copied")))
                                }
                              }} style={styleId_1fmvBo}>
                                <LibTextstyle text={esp.lang("market/ads_deposit_detail", "copy")} textStyle="caption1" style={styleId_1tkXrB} />
                                <LibIcon name='content-copy' size={16} color={MarketStyle.colorPrimaryMarket} style={styleId_NmYt8} />
                              </TouchableOpacity>
                            }
                          </View>
                        </View>
                      }

                      <View style={styleId_2tmrJ4} >
                        <LibTextstyle text={esp.lang("market/ads_deposit_detail", "deposit_total")} textStyle="caption1" style={styleId_1HHJzj} />
                        <LibTextstyle text={LibUtils.money(data?.amount, data?.currency)} textStyle="caption1" style={styleId_1iyzQx} />
                      </View>

                      <View style={styleId_2tmrJ4} >
                        <LibTextstyle text={esp.lang("market/ads_deposit_detail", "description")} textStyle="caption1" style={styleId_1HHJzj} />
                        <LibTextstyle text={data?.title} textStyle="caption1" style={styleId_1iyzQx} />
                      </View>
                    </View>

                    <View style={styleId_oWong} >
                      {
                        data?.payment?.payment_id != 2 &&
                        Object.keys(data.payment.description).map(renderPaymentDescription)
                      }
                    </View>
                  </>
                  : null
            }


            <View style={styleId_Z1W9WPO}>
              {
                data.status == 1 &&
                <MarketButton
                  textStyle={styleId_21Duj3}
                  text={esp.lang("market/ads_deposit_detail", "change_payment_method")}
                  buttonStyle={styleId_Nvklj}
                  onPress={() => {
                    LibNavigation.navigate('market/ads_deposit_payment_method', { price: data?.amount, id: data?.payment_id, fee: data?.fee, from: 'market/ads_deposit', order_id: data?.id })
                  }}
                />
              }
              <MarketButton
                textStyle={styleId_21Duj3}
                text={esp.lang("market/ads_deposit_detail", "back_to_dashboard")}
                buttonStyle={{}}
                onPress={() => {
                  LibNavigation.backToRoot()
                  LibNavigation.navigate('market/ads')
                }}
              />
            </View>

          </LibScroll>
      }
    </View>
  )
}
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_Z1vIsBm: any = { alignItems: 'center', marginTop: 15 }
const styleId_ZnsiNj: any = { width: 120, height: 120 }
const styleId_pVAGd: any = { fontWeight: "bold", textAlign: 'center', marginHorizontal: 15 }
const styleId_1QKfTW: any = { textAlign: 'center', marginHorizontal: 15, marginTop: 10 }
const styleId_1WAFLr: any = { marginTop: 10, marginHorizontal: 15 }
const styleId_Z2mCmbA: any = { fontSize: 14 }
const styleId_1VKXmB: any = { marginTop: 5, color: MarketStyle.colorPrimaryMarket }
const styleId_1Tkdft: any = { padding: 15, backgroundColor: 'white' }
const styleId_1HHJzj: any = { fontSize: 14, color: '#707070' }
const styleId_1fmvBo: any = { flexDirection: 'row', alignItems: 'center' }
const styleId_1dQx9h: any = { fontSize: 14, fontWeight: 'bold', flex: 1 }
const styleId_Z1wJs17: any = { color: MarketStyle.colorPrimaryMarket, fontWeight: 'bold' }
const styleId_LapyN: any = { backgroundColor: '#F3F4F6', height: 10 }
const styleId_1KynKh: any = { padding: 15 }
const styleId_2dpQuM: any = { flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#f1f1f1' }
const styleId_1A6QzH: any = { flex: 1, fontFamily: 'Arial', fontSize: 18 }
const styleId_ZoW7jY: any = { width: 55.7, height: 40 }
const styleId_2tlMHb: any = { marginTop: 10 }
const styleId_Zrz44M: any = { flexDirection: 'row', alignItems: 'center', marginTop: 5 }
const styleId_Z2uIOw5: any = { fontSize: 14, fontWeight: 'bold', flex: 1, color: MarketStyle.colorPrimaryMarket }
const styleId_1tkXrB: any = { fontSize: 14, fontWeight: 'bold', color: MarketStyle.colorPrimaryMarket }
const styleId_NmYt8: any = { marginLeft: 5 }
const styleId_2tmrJ4: any = { marginTop: 15 }
const styleId_1iyzQx: any = { fontSize: 14, fontWeight: 'bold', color: MarketStyle.colorPrimaryMarket, marginTop: 5 }
const styleId_oWong: any = { backgroundColor: '#F3F4F6' }
const styleId_Z13ukTA: any = { marginTop: 10, backgroundColor: 'white', padding: 15, flexDirection: "row", alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#f1f1f1' }
const styleId_Z1PyeTT: any = { flexDirection: "row", alignItems: 'center', flex: 1 }
const styleId_Lyx33: any = { width: 20, height: 20, marginRight: 10 }
const styleId_Zml5C0: any = { fontFamily: "Arial", fontSize: 14, fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }
const styleId_1txFsO: any = { backgroundColor: 'white', paddingBottom: 10, paddingTop: 5 }
const styleId_Z4DU9B: any = { flexDirection: 'row', paddingHorizontal: 15, paddingVertical: 5 }
const styleId_21GLEo: any = { borderRadius: 8, width: 16, height: 16, backgroundColor: "#f5e71e", marginRight: 10, marginTop: 2, alignItems: 'center', justifyContent: 'center' }
const styleId_Je65l: any = { fontFamily: 'Arial', fontSize: 8, fontWeight: 'bold', color: '#707070' }
const styleId_Z1W9WPO: any = { marginTop: 20, marginBottom: 10, marginHorizontal: 15 }
const styleId_21Duj3: any = { color: 'white' }
const styleId_Nvklj: any = { marginBottom: 10 }