// withHooks
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventOrderProperty } from 'esoftplay/cache/event/order/import';
import { EventOrder_waitingProperty } from 'esoftplay/cache/event/order_waiting/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 { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import useGlobalState from 'esoftplay/global';
import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import { useRef } from 'react';

import { EventAlert } from 'esoftplay/cache/event/alert/import';
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventCapture } from 'esoftplay/cache/event/capture/import';
import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
import { EventTransaction } from 'esoftplay/cache/event/transaction/import';
import { LibAutoreload } from 'esoftplay/cache/lib/autoreload/import';
import useLazyState from 'esoftplay/lazy';
import React, { useEffect } from 'react';
import { Linking, Text, TouchableOpacity, View } from 'react-native';
import QRCode from 'react-native-qrcode-svg';


export interface EventOrder_waitingArgs {

}
export interface EventOrder_waitingProps {

}

const stateData = useGlobalState<any>(undefined)

export default function m(props: EventOrder_waitingProps): any {
  const { url, isBackToRoot }: any = LibNavigation.getArgsAll(props)
  const [result, setResult] = useSafeState<any>()
  const [, setAddition, getAddition] = useLazyState<any>()

  const [trxId] = useSafeState(EventTransaction().getTrxId())
  const qrView = useRef<View>(null)


  useEffect(() => {
    loadData()
    stateData.reset()
    LibAutoreload.set(() => {
      loadData()
    }, 6000)
    return () => LibAutoreload.clear()
  }, [])


  function loadData() {
    EventOrderProperty.subscribe().trigger()
    new LibCurl(url + ((url.includes("?") ? "&" : "?") + 't=' + new Date().getTime()), null, (res) => {
      esp.log(res);
      setResult(res)
      if (res?.status != 0) {
        LibAutoreload.clear()
      }

      if (res?.status == 1) {
        LibNavigation.backToRoot()
        LibNavigation.navigate('user/profile')
        LibNavigation.navigate('event/order')
      }
    }, (error) => {
      LibDialog.warning(esp.lang("event/order_detail_waiting", "err"), error?.message);
      LibNavigation.back()
    }, 1)
  }

  function doCancel(url: string): void {
    LibDialog.warningConfirm(esp.lang("event/order_detail", "confirm"), esp.lang("event/order_detail", "cancel_this_order"), esp.lang("event/order_detail", "btn_yes"), () => {
      LibProgress.show(esp.lang("event/order_detail", "please_wait"))
      new LibCurl(url, null, (result, msg) => {
        EventOrderProperty.subscribe().trigger()
        EventOrder_waitingProperty.subscribe().trigger()
        LibProgress.hide()
        // LibDialog.info(esp.lang("event/order_detail", "congratulation"), msg)
        LibToastProperty.show(esp.lang("event/order_detail_waiting", "canceled"))
        LibNavigation.back()
        LibNavigation.navigate('event/order_waiting')
      }, (error) => {
        LibDialog.warning(esp.lang("event/order_detail_waiting", "err_confirm"), error?.message);
        // LibNavigation.back()
        LibProgress.hide()
      })
    }, esp.lang("event/order_detail", "btn_cancel"), () => {

    })
  }

  function parseQty(value: string, qty: number): string {
    return new Array(qty).fill(value).join('|')
  }

  let dataPost: any = {
    trx_id: trxId,
    buyer_name: encodeURIComponent(result?.params?.buyer?.buyer_name),
    buyer_email: encodeURIComponent(result?.params?.buyer?.buyer_email),
    buyer_phone: encodeURIComponent(result?.params?.buyer?.buyer_phone),
    name: parseQty(encodeURIComponent(result?.params?.buyer?.buyer_name), result?.qty),
    email: parseQty(encodeURIComponent(result?.params?.buyer?.buyer_email), result?.qty),
    phone: parseQty(encodeURIComponent(result?.params?.buyer?.buyer_phone), result?.qty),
    address: parseQty(encodeURIComponent(result?.params?.buyer?.address), result?.qty),
    location_id: parseQty(encodeURIComponent(result?.params?.buyer?.location_id), result?.qty),
    ondate: result?.ondate,
    price_id: result?.price_id,
    qty: result?.qty,
    payment_id: result?.payment_id,
  }

  function rebuy(dataCC?: any) {
    if (result?.has_addition == 1) {
      dataPost.addition = getAddition()
    }

    if (!!dataCC) {
      dataPost.card_id = dataCC?.card_id
      dataPost.card_number = dataCC?.card_number
      dataPost.card_cvv = dataCC?.card_cvv
      dataPost.card_expiry_year = dataCC?.card_expiry_month
      dataPost.card_expiry_month = dataCC?.expiry_month
    }

    let url = 'event_booking/' + result?.event_id
    LibNavigation.navigateForResult('event/loading_page', {
      post: dataPost,
      url: url,
      title: esp.lang("bigbang/payment", "title_buy_ticket", result?.event_name),
      isSecure: 1,
      amount: LibUtils.numberAbsolute(result?.total),
      currency: result?.currency,
      receive_name: "BBO",
      receive_image: 'https://bbo.co.id/images/uploads/logo-bbo-tagline_1.png',
      send_name: result?.name,
      send_image: result?.image,
    }, 123).then((value) => {

      // let module = ['event/order', 'payment/cc_web']

      LibNavigation.backToRoot()
      LibNavigation.navigateForResult('payment/cc_web', {
        ...value,
        statusSuccess: [1]
      }).then((res) => {
        LibNavigation.backToRoot()
        LibNavigation.push('user/profile')
        if (res?.hasOwnProperty('params_error') || res?.hasOwnProperty('failed')) {
          LibNavigation.push('event/order_waiting')
          LibNavigation.push('event/order_detail_waiting', { url: res?.url })
        } else {
          LibNavigation.push('event/order')
        }
      })
      // module?.map((item: any) => LibNavigation.push(item,
      //   {
      //     ...value,
      //     url: value.url,
      //     title: esp.lang("bigbang/loading_page", "success")
      //   }
      // ))
    })

    // cancel booking ini
    new LibCurl(result?.cancellation, null, (result, msg) => {
      EventOrderProperty.subscribe().trigger()
      EventOrder_waitingProperty.subscribe().trigger()
    }, (error) => {
      LibDialog.warning(esp.lang("event/order_detail_waiting", "err_confirm"), error?.message);
    })
  }

  function pay(dataCC?: any, pin?: number) {
    let post: any = {
      id: result?.id,
      trx_id: trxId,
    }

    if (result?.has_addition == 1) {
      post.addition = getAddition()
    }

    if (pin) {
      post.pin = pin
    }

    if (dataCC) {
      post.card_id = dataCC?.card_id
      post.card_number = dataCC?.number
      post.card_cvv = dataCC?.card_cvv
      post.card_expiry_year = dataCC?.expiry_year
      post.card_expiry_month = dataCC?.expiry_month
    }

    LibProgress.show(esp.lang("event/order_detail_waiting", "wait"))
    new LibCurl('event_order_waiting_pay', post, (res, msg) => {
      if (res?.url_web) {
        let forWebCC = {
          url: url,
          url_web: res?.url_web,
          statusSuccess: [1]
        }
        LibNavigation.navigateForResult('payment/cc_web', {
          ...forWebCC,
        }).then((res) => {
          LibNavigation.backToRoot()
          LibNavigation.push('user/profile')
          if (res?.hasOwnProperty('params_error') || res?.hasOwnProperty('failed')) {
            LibNavigation.push('event/order_waiting')
            LibNavigation.push('event/order_detail_waiting', { url: res?.url })
          } else {
            LibNavigation.push('event/order')
          }
        })
      } else {
        LibNavigation.backToRoot()
        LibNavigation.navigate('user/profile')
        LibNavigation.navigate('event/order')
      }

      LibProgress.hide()
      LibToastProperty.show(msg)
    }, (err) => {
      esp.log(err);
      LibProgress.hide()
      LibDialog.warning("Oops", err?.message)
    }, 1)

  }

  function payWithCC(cc?: boolean) {
    if (!!cc) {
      LibNavigation.navigateForResult('component/payment_cc', {
        amount: result?.total,
        event_id: result?.event_id,
        currency: result?.currency
      }).then((value) => {
        doBuy(value)
      })
    } else {
      doBuy()
    }

    function doBuy(value?: any) {
      LibDialog.confirm(esp.lang("bigbang/payment", "dialog_title"), esp.lang("bigbang/payment", "dialog_msg"), esp.lang("bigbang/payment", "dialog_ok"), () => {
        if (result?.hasOwnProperty("url_pay") && result?.url_pay != "") {
          pay(value)
        } else {
          rebuy(value)
        }
      }, esp.lang("bigbang/payment", "dialog_cancel"), () => {

      })
    }

  }

  if (!result) {
    return <LibLoading />
  }

  let dateNow = moment().localeFormat("YYYY-MM-DD HH:mm:ss")

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={esp.lang("event/order_detail_waiting", "header")} subtitle={result?.event_name} />
      <LibScroll onRefresh={loadData}>
        <View style={{ margin: 15, padding: 10, borderRadius: 5, backgroundColor: '#fff' }}>
          <View style={{ marginBottom: 7, borderBottomWidth: 3, borderBottomColor: LibStyle.colorBgGrey }}>
            {
              result?.prices?.length > 0 && result?.prices?.map((item: any, i: number) => {
                return (
                  <View key={i} style={{ marginBottom: 3, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
                    <View style={{ flex: 2, }}>
                      <EventHtmltext allowFontScaling={false} style={{ fontWeight: 'bold', fontStyle: "normal", letterSpacing: 1, color: "#4a4a4a" }}>{item?.name}</EventHtmltext>
                    </View>
                    <Text allowFontScaling={false} style={{ flex: 1, alignContent: 'center', alignItems: 'center', fontStyle: "normal", letterSpacing: 1, textAlign: "right", color: "#9b9b9b" }}>{LibUtils.number(item?.qty) + " " + esp.lang("event/order_detail_waiting", "ticket")}</Text>
                  </View>
                )
              })
            }
          </View>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
            <View style={{ flex: 2 }} />
            <View style={{}} />
            <Text allowFontScaling={false} style={{ flex: 1, fontStyle: "normal", letterSpacing: 1, textAlign: "right", color: "#4a4a4a" }}>{result?.prices?.reduce((total: any, ticket: any) => total + parseInt(ticket.qty, 10), 0) + " " + esp.lang("event/order_detail_waiting", "ticket")}</Text>
          </View>

          <View style={{ alignContent: 'center', alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', marginTop: 5 }}>
            <Text allowFontScaling={false} style={{ flex: 2, fontWeight: 'bold', fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail_waiting", "total_bill")}</Text>
            <Text allowFontScaling={false} style={{ flex: 1, alignContent: 'center', alignItems: 'center', fontSize: 14, fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#9b9b9b" }}>{LibUtils.money(result?.total, result?.currency)}</Text>
          </View>
          {
            result?.status == 0 && LibUtils.moment(result?.exp_payment).serverFormat('YYYY-MM-DD HH:mm:ss', result?.timezone) >= dateNow &&
            <View style={{ alignContent: 'center', alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', marginTop: 5 }}>
              <Text allowFontScaling={false} style={{ flex: 1, fontWeight: 'bold', fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail_waiting", "booking_code")}</Text>
              <Text allowFontScaling={false} style={{ flex: 1, alignContent: 'center', alignItems: 'center', fontSize: 14, fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: LibStyle.colorRed }}>{result?.booking_code}</Text>
            </View>
          }
          {
            result?.status == 0 &&
            <View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', marginTop: 5 }}>
              <Text allowFontScaling={false} style={{ fontWeight: 'bold', flex: 1, flexWrap: 'wrap', fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail_waiting", "expired_payment")}</Text>
              <EventCountdown_base expired={moment(result?.exp_payment).serverFormat("YYYY-MM-DD HH:mm:ss", result?.timezone)} timezone={result?.timezone} style={{ flex: 1, marginLeft: 15, fontSize: 14, color: LibStyle.colorRed, fontFamily: "ArialBold" }} />
            </View>
          }

          {
            result?.use_seat == 1 &&
            <>
              <Text allowFontScaling={false} style={{ fontSize: 14, marginTop: 5, marginBottom: 0, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail", "seat_number")}</Text>
              <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginLeft: -10 }}>
                {
                  result?.seats?.map((item: any, i: number) => {
                    return (
                      <View key={i} style={{ margin: 10, marginBottom: 0, marginRight: 5, height: 41, width: 41, backgroundColor: LibStyle.colorPrimary, borderWidth: 1, borderColor: LibStyle.colorPrimary, borderRadius: 4, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
                        <LibIcon name="seat" color={"#fff"} />
                        <Text allowFontScaling={false} style={{ fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{item}</Text>
                      </View>
                    )
                  })
                }
              </View>
            </>
          }

        </View>
        <View style={{ margin: 15, marginTop: 0, padding: 10, borderRadius: 5, backgroundColor: '#fff' }}>
          <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail", "payment_method")}</Text>
          <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', marginTop: 4 }}>
            <LibPicture source={{ uri: result?.params?.payment_image }} resizeMode='contain' style={{ width: 55.7, height: 40 }} />
            <Text allowFontScaling={false} style={{ marginLeft: 7, fontSize: 14, fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#9b9b9b" }}>{result?.params?.payment_name}</Text>
          </View>
          {
            result?.params?.error && result?.params?.error != "" &&
            <EventAlert
              color="#dc143c"
              msg={result?.params?.error}
              useIcon
              style={{ marginTop: 15, margin: 0 }}
            />

          }

          {
            // qris
            result?.payment?.payment_type == 11 &&
            <>
              <View style={{ margin: 10, alignSelf: 'center' }}>
                <QRCode ecl="H" size={300} value={result?.params?.qr} />
              </View>

              <EventButton
                label={esp.lang("event/order_detail_waiting", "download")}
                style={{ margin: 10, marginHorizontal: 20 }}
                backgroundColor={LibStyle.colorGreen}
                onPress={() => {
                  LibDialog.custom(
                    <View>
                      <TouchableOpacity onPress={() => LibDialog.hide()} style={{ alignItems: 'flex-end' }} >
                        <LibIcon name="close" />
                      </TouchableOpacity>
                      <View ref={qrView} style={{ backgroundColor: '#fff' }} collapsable={false}>
                        <Text allowFontScaling={false} style={{ fontSize: 18, fontWeight: 'bold', textAlign: 'center', marginBottom: 10 }}>{result?.event_name}</Text>
                        <Text allowFontScaling={false} style={{ fontSize: 16, textAlign: 'center', marginBottom: 10 }}>{result?.price_name}</Text>
                        <Text allowFontScaling={false} style={{ fontSize: 18, fontWeight: 'bold', textAlign: 'center', marginBottom: 10 }}>{LibUtils.money(result?.total, result?.currency)}</Text>
                        <LibPicture source={{ uri: result?.params?.payment_image }} resizeMode='contain' style={{ alignSelf: 'center', width: LibStyle.width / 3, height: 50 }} />
                        <View style={{ backgroundColor: 'white', alignItems: 'center' }} >
                          <QRCode ecl="H" size={250} value={result?.params?.qr} />
                        </View>

                        <Text allowFontScaling={false} style={{ fontSize: 14, textAlign: 'center', marginVertical: 10 }}>{esp.lang("event/order_detail_waiting", "expired_on") + moment(result?.exp_payment).serverFormat("DD MMM YYYY, HH:mm:ss", result?.timezone)}</Text>

                      </View>
                      <TouchableOpacity onPress={() => EventCapture.capture(qrView, result?.event_name + "-" + result?.price_name)} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center', height: 30, marginTop: 10, borderTopColor: LibStyle.colorBlue, borderBottomColor: LibStyle.colorBlue, borderTopWidth: 0.5, borderBottomWidth: 0.5 }}>
                        <LibIcon name="download" size={15} />
                        <Text allowFontScaling={false} style={{ marginLeft: 10, fontFamily: 'ArialBold', fontSize: 13, textAlign: 'center' }} >{esp.lang("cashier/qr", "label_download")}</Text>
                      </TouchableOpacity>
                    </View>
                  )
                }}
              />

            </>
          }

          {
            result?.status == 0 && result?.payment?.payment_type != 3 && result?.payment?.payment_type != 4 && result?.payment?.payment_type != 11 && result?.payment?.payment_type != 12 && result?.payment?.payment_type != 13 && result?.payment?.payment_type != 14 &&
            <>
              <View style={{ height: 3, backgroundColor: "#f6f6f6" }} />

              <Text allowFontScaling={false} style={{ marginTop: 7, fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9f9f9f" }}>{result && result?.params != null && result?.params.hasOwnProperty('cvs_no') ? esp.lang("event/order_detail", "transaction_number") : esp.lang("event/order_detail", "virtual_account_number")}  </Text>
              {
                result?.params != null && result?.params?.va_no && moment(result?.exp_payment).serverFormat("YYYY-MM-DD HH:mm:ss") > dateNow &&
                <View style={{ marginTop: 7, alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between' }}>
                  <Text numberOfLines={1} ellipsizeMode={'tail'} allowFontScaling={false} style={{ flex: 8, fontSize: 18, fontStyle: "normal", letterSpacing: 0, color: "#1abc9c" }}>{result?.params != null && result?.params.va_no}</Text>
                  <TouchableOpacity onPress={() => {
                    LibUtils.copyToClipboard(result?.params != null && result?.params?.va_no)
                    LibToastProperty.show(esp.lang("event/order_detail", "success_copied") + result?.params != null && result?.params?.va_no)
                  }}>
                    <View style={{ flex: 2, alignContent: 'center', alignItems: 'center', justifyContent: 'center', flexDirection: 'row', }}>
                      <LibIcon name='content-copy' style={{ color: '#2e83bb' }} size={13} />
                      <Text allowFontScaling={false} style={{ marginLeft: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#2e83bb" }}>{esp.lang("event/order_detail", "copy")}</Text>
                    </View>
                  </TouchableOpacity>
                </View>
              }
              {
                result?.params != null && result?.params.cvs_no &&
                <View style={{ marginTop: 7, alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between' }}>
                  <Text numberOfLines={1} ellipsizeMode={'tail'} allowFontScaling={false} style={{ flex: 8, fontSize: 18, fontStyle: "normal", letterSpacing: 0, color: "#1abc9c" }}>{result?.params != null && result?.params?.cvs_no}</Text>
                  <TouchableOpacity onPress={() => {
                    LibUtils.copyToClipboard(result?.params != null && result?.params.cvs_no)
                    LibToastProperty.show(esp.lang("event/order_detail", "success_copied") + result?.params != null && result?.params.cvs_no)
                  }}>
                    <View style={{ flex: 2, alignContent: 'center', alignItems: 'center', justifyContent: 'center', flexDirection: 'row', }}>
                      <LibIcon name='content-copy' style={{ color: '#2e83bb' }} size={13} />
                      <Text allowFontScaling={false} style={{ marginLeft: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#2e83bb" }}>{esp.lang("event/order_detail", "copy")}</Text>
                    </View>
                  </TouchableOpacity>
                </View>
              }

            </>
          }

          {
            // ewallet
            result?.payment?.payment_type == 13 &&
            <>
              <View style={{ height: 3, backgroundColor: "#f6f6f6" }} />
              <TouchableOpacity
                onPress={() => {
                  if (result?.params?.url_mobile != null) {
                    Linking.openURL(result?.params?.url_mobile)
                  } else if (result?.params?.url_web != null) {
                    Linking.openURL(result?.params?.url_web)
                  }
                }}
                style={{ marginTop: 15, borderRadius: 10, borderWidth: 2, overflow: 'hidden', borderColor: "#f6f6f6" }}>
                <View style={{ padding: 15, backgroundColor: '#000', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
                  <Text allowFontScaling={false} style={{ flex: 1, alignContent: 'center', alignItems: 'center', fontWeight: 'bold', fontSize: 16, fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{esp.lang("event/order_detail_waiting", "scan_or_tap")}</Text>
                </View>
                {
                  result?.params?.qr != null &&
                  <View style={{ margin: 15, alignSelf: 'center' }}>
                    <QRCode ecl="H" size={250} value={result?.params?.qr} />
                  </View>
                }

              </TouchableOpacity>

            </>
          }

          <View style={{ height: 3, backgroundColor: "#f6f6f6" }} />
          {
            result?.status == 0 &&
            <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 14 }}>{esp.lang("event/order_detail", "Checked_within_10_minutes_after_payment_is_made")}</Text>
          }
          {
            result?.payment?.description != null &&
            <TouchableOpacity onPress={() => {
              LibNavigation.navigate('event/order_detail_payment', {
                data: result?.payment?.description
              })
            }}>
              <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#16a085", marginTop: 7 }}>{esp.lang("event/order_detail", "payment_instruction")}</Text>
            </TouchableOpacity>
          }

        </View>
      </LibScroll>
      {
        result?.status == 0 && LibUtils.moment(result?.exp_payment).serverFormat('YYYY-MM-DD HH:mm:ss', result?.timezone) >= dateNow &&
        <View style={{ padding: 15, paddingTop: 10, paddingBottom: 10 }}>
          {
            (result?.payment?.payment_type == 3 || result?.payment?.payment_type == 12 || result?.payment?.payment_type == 14) && //khusus cc & FPX
            <TouchableOpacity onPress={() => {
              if (result?.hasOwnProperty("has_addition") && result?.has_addition == 1) {
                LibNavigation.navigateForResult('event/additional', {
                  event_id: result?.event_id,
                  ondate: result?.ondate,
                  qty: result?.qty,
                  price_id: result?.price_id
                }, 321).then((additions) => {
                  if (additions != "") {
                    setAddition(additions)
                  }
                  payWithCC(result?.payment?.payment_type == 3)
                })
              } else {
                payWithCC(result?.payment?.payment_type == 3)
              }
            }}>
              <View style={{ marginBottom: 10, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorRed, justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: LibStyle.colorRed }} >
                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: "#fff", marginRight: 13, marginLeft: 10 }} >{result?.hasOwnProperty("url_pay") && result?.url_pay != "" ? esp.lang("event/order_detail_waiting", "pay") : esp.lang("event/order_detail_waiting", "pay_again")}</Text>
              </View>
            </TouchableOpacity>
          }
          {
            result?.payment?.payment_type == 4 && result?.hasOwnProperty("url_pay") && result?.url_pay != "" && // bbopay
            <TouchableOpacity onPress={() => {
              if (result?.hasOwnProperty("has_addition") && result?.has_addition == 1) {
                LibNavigation.navigateForResult('event/additional', {
                  event_id: result?.event_id,
                  ondate: result?.ondate,
                  qty: result?.qty,
                  price_id: result?.price_id
                }, 321).then((additions) => {
                  if (additions != "") {
                    setAddition(additions)
                  }
                  LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
                    if (p) {
                      pay(undefined, p)
                    }
                  })
                })
              } else {
                LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
                  if (p) {
                    pay(undefined, p)
                  }
                })
              }

            }}>
              <View style={{ marginBottom: 10, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorRed, justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: LibStyle.colorRed }} >
                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: "#fff", marginRight: 13, marginLeft: 10 }} >{esp.lang("event/order_detail_waiting", "pay")}</Text>
              </View>
            </TouchableOpacity>
          }
          <TouchableOpacity onPress={() => { doCancel(result?.cancellation) }}>
            <View style={{ height: 35, borderRadius: 17, backgroundColor: "#fff", justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: LibStyle.colorRed }} >
              <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: LibStyle.colorRed, marginRight: 13, marginLeft: 10 }} >{esp.lang("event/order_detail", "cancel_order")}</Text>
            </View>
          </TouchableOpacity>
          {
            isBackToRoot && isBackToRoot == 1 &&
            <TouchableOpacity onPress={() => {
              LibNavigation.reset();
              // BigbangIndexProperty.setTab(0)
            }}>
              <View style={{ marginTop: 10, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorGreen, justifyContent: 'center', alignItems: 'center' }} >
                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'white', marginRight: 13, marginLeft: 10 }} >{esp.lang("event/order_detail", "back_to_homepage")}</Text>
              </View>
            </TouchableOpacity>
          }
        </View>
      }
    </View>
  )

}