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

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 { 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 { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketOrderArgs } from 'esoftplay/cache/market/order/import';
import { MarketOrder_detailArgs } from 'esoftplay/cache/market/order_detail/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { useTimeout } from 'esoftplay/timeout';

import LottieView from "lottie-react-native";
import React, { useEffect, useRef } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface MarketOrder_detail_paymentArgs {
  url: string
}
export interface MarketOrder_detail_paymentProps {

}
export default function m(props: MarketOrder_detail_paymentProps): any {
  const { url } = LibNavigation.getArgsAll<any>(props)
  const [data, setData] = useSafeState<any>()
  const [paymentDetail, setPaymentDetail] = useSafeState<any>()
  const timeout = useTimeout()
  const animation = useRef<LottieView>(null)

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

  useEffect(() => {
    new LibCurl(url, null,
      (res) => {
        setData(res)
        new LibCurl(res.payment_url, null,
          (result) => {
            setPaymentDetail(result)
          }, (err) => {
            esp.log(err);
          }, 1
        )
      }, (msg) => {
        esp.log(msg);
      }, 1)
  }, [])

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={(data?.status == 3 && paymentDetail?.payment?.payment_type == 6) ? esp.lang("market/order_detail_payment", "order_done") : data?.status == 1 ? esp.lang("market/order_detail_payment", "payment") : esp.lang("market/order_detail_payment", "payment_success")} onlyBack rightView={() => (
        <TouchableOpacity onPress={() => {
          LibNavigation.replace<MarketOrder_detailArgs>('market/order_detail', { url: url })
        }} style={{ height: 50, justifyContent: 'center', paddingRight: 17 }} >
          <LibTextstyle textStyle="callout" text={esp.lang("market/order_detail_payment", "text_detail")} style={{ color: MarketStyle.colorPrimaryMarket }} />
        </TouchableOpacity>
      )} />
      {
        !data ? <LibLoading /> :
          <LibScroll>
            <View style={{ marginHorizontal: 17 }} >
              <View style={{ alignItems: 'center', marginTop: 15 }} >
                <LottieView
                  ref={animation}
                  loop={false}
                  style={{
                    width: 120,
                    height: 120,
                  }}
                  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>
              <View style={{ alignItems: "center" }} >
                <LibTextstyle text={data?.status == 1 ? esp.lang("market/order_detail_payment", "one_step") : (data?.status == 3 && paymentDetail?.payment?.payment_type == 6) ? esp.lang("market/order_detail_payment", "order_process") : esp.lang("market/order_detail_payment", "success_payment")} textStyle="headline" style={{ fontWeight: "bold" }} />
                <LibTextstyle text={data?.status == 1 ? esp.lang("market/order_detail_payment", "orde_wait") : esp.lang("market/order_detail_payment", "order_send")} textStyle="caption1" style={{ textAlign: "center", marginTop: 5, fontSize: 14 }} />
                <LibTextstyle text={esp.lang("market/order_detail_payment", "payment_total")} textStyle="caption1" style={{ marginTop: 20, fontSize: 14 }} />
                <LibTextstyle text={LibUtils.money(Number(data?.shipping) + Number(data?.total) + Number(data?.fee))} textStyle="title3" style={{ marginTop: 5, color: MarketStyle.colorPrimaryMarket }} />
                <LibTextstyle text={esp.lang("market/order_detail_payment", "payment_method")} textStyle="caption1" style={{ marginVertical: 5, fontSize: 14, marginTop: 10 }} />
                <View style={{ flexDirection: "row", alignItems: "center" }} >
                  {
                    LibUtils.checkUndefined(paymentDetail, "payment.payment_type") &&
                    <LibPicture source={{ uri: paymentDetail?.payment?.image }} style={{ width: 55.7, height: 40, marginRight: 5 }} resizeMode="contain" />
                  }
                  <LibTextstyle textStyle={"callout"} text={data?.payment_title} />
                </View>
                {
                  (paymentDetail?.params?.va_no || paymentDetail?.params?.csv_no) &&
                  <View style={{}} >
                    <LibTextstyle text={paymentDetail?.params?.va_no ? esp.lang("market/order_detail_payment", "va_number") : esp.lang("market/order_detail_payment", "waybill_number")} textStyle="caption1" style={{ textAlign: "center", fontSize: 14, marginTop: 5, marginBottom: 10 }} />
                    <View style={{ flexDirection: "row" }}>
                      <View style={{ borderBottomWidth: 1, borderBottomColor: MarketStyle.colorPrimaryMarket }} >
                        <Text allowFontScaling={false} ellipsizeMode={"middle"} numberOfLines={1} style={{ fontFamily: "Arial", fontSize: 20, fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: MarketStyle.colorPrimaryMarket }}>{paymentDetail?.params?.va_no || paymentDetail?.params?.cvs_no}</Text>
                      </View>
                      <TouchableOpacity style={{ marginLeft: 10, alignItems: "center", justifyContent: 'center', flexDirection: "row" }}
                        onPress={() => {
                          LibUtils.copyToClipboard(paymentDetail?.params?.va_no || paymentDetail?.params?.cvs_no).then(() => LibToastProperty.show(esp.lang("market/order_detail_payment", "copied")))
                        }} >
                        <LibIcon name="content-copy" style={{ color: '#2e83bb' }} size={14} />
                        <LibTextstyle textStyle={"footnote"} text={esp.lang("market/order_detail_payment", "copy")} style={{ color: '#2e83bb', marginLeft: 5 }} />
                      </TouchableOpacity>
                    </View>
                  </View>
                }
              </View>
              <View style={{ marginTop: 30 }} >
                <MarketButton
                  textStyle={{ color: 'white' }}
                  text={esp.lang("market/order_detail_payment", "order_again")}
                  buttonStyle={{ marginVertical: 5 }}
                  onPress={() => { LibNavigation.backToRoot() }}
                />
                <MarketButton
                  text={esp.lang("market/order_detail_payment", "show_order_list")}
                  colorBackground={"white"}
                  colorBorder={MarketStyle.colorPrimaryMarket}
                  color={MarketStyle.colorPrimaryMarket}
                  buttonStyle={{ marginVertical: 5 }}
                  onPress={() => {
                    if (paymentDetail?.payment?.payment_type == 4 || paymentDetail?.payment?.payment_type == 6) {
                      LibNavigation.replace<MarketOrderArgs>('market/order', { status: 3 })
                    } else {
                      LibNavigation.replace<MarketOrderArgs>('market/order')
                    }
                  }} />
              </View>
            </View>
            <View />
          </LibScroll>
      }
    </View>
  )
}