// withHooks
import { useRef } from 'react';

import { BigbangPayment_detail, BigbangPayment_detailProperty } from 'esoftplay/cache/bigbang/payment_detail/import';
import { BigbangPayment_list } from "esoftplay/cache/bigbang/payment_list/import";
import { EventButton } from "esoftplay/cache/event/button/import";
import { EventHeader } from "esoftplay/cache/event/header/import";
import { EventTransaction } from 'esoftplay/cache/event/transaction/import';
import { LibCurl } from "esoftplay/cache/lib/curl/import";
import { LibDialog } from "esoftplay/cache/lib/dialog/import";
import { LibNavigation } from "esoftplay/cache/lib/navigation/import";
import { LibProgress } from "esoftplay/cache/lib/progress/import";
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStyle } from "esoftplay/cache/lib/style/import";
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import esp from "esoftplay/esp";
import useSafeState from "esoftplay/state";
import { ScrollView, Text, View } from "react-native";



export interface EventOrder_detail_upgrade_paymentArgs {

}
export interface EventOrder_detail_upgrade_paymentProps {

}
export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
  const { dataTicket, selectedTicket, fee_platform }: any = LibNavigation.getArgsAll(props)
  const [selectedPayment, setSelectedPayment] = useSafeState<any>()
  const [platformFee, setPlatformFee] = useSafeState<any>(fee_platform)
  const [charge, setCharge] = useSafeState<any>(0)
  const [chargePercent, setChargePercent] = useSafeState<any>()

  const [trxId] = useSafeState(EventTransaction().getTrxId())
  const scrollRef = useRef<ScrollView>(null)
  const scrollYRef = useRef(0)
  const dialogSeat = useRef<LibSlidingup>(null)

  function doUpgrade(pin?: any) {
    const LibToastProperty = esp.modProp("lib/toast")
    if (!selectedPayment) {
      LibToastProperty.show(esp.lang("event/order_detail_upgrade_payment", "empty_method"))
      return
    }

    LibDialog.confirm(esp.lang("event/order_detail_upgrade_payment", "confirm_title"), esp.lang("event/order_detail_upgrade_payment", "confirm_msg", dataTicket?.price_name, selectedTicket?.selected_ticket?.price_name_to), esp.lang("event/order_detail_upgrade_payment", "confirm_ok"), () => {
      let post = {
        booking_id: dataTicket?.booking_id,
        price_id_to: selectedTicket?.selected_ticket?.price_id_to,
        trx_id: trxId,
        payment_id: selectedPayment?.payment_id,
        ...selectedPayment
      }

      if (selectedTicket?.selected_ticket?.use_seat == 1) {
        post.row_id = selectedTicket?.row_id
        post.column_id = selectedTicket?.column_id
        post.seat_name = selectedTicket?.seat_name
      }

      if (selectedTicket?.selected_ticket?.seat_autopick == 1) {
        post.adjacent_seats = 1
      }

      if (selectedPayment?.payment_id == 2) {
        post.pin = pin
      }
      LibProgress.show(esp.lang("event/order_detail_upgrade_payment", "confirm_wait"))
      new LibCurl('event_order_detail_upgrade_checkout', post, (res, msg) => {
        esp.log({ post });
        LibProgress.hide()
        LibNavigation.reset()
        if (selectedPayment?.payment_id == 2) /* bbo pay */ {
          LibToastProperty.show(msg)
          LibNavigation.navigate('event/order_detail', { url: res?.url })
        } else if (selectedPayment?.payment_id == 3)/* cc */ {
          LibNavigation.navigateForResult('payment/cc_web', {
            ...res,
            statusSuccess: [1]
          }).then((res) => {
            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.navigate('event/order_detail_waiting', { url: res?.url })
        }
      }, (err) => {
        LibProgress.hide()
        LibDialog.warning(esp.lang("event/order_detail_upgrade_payment", "oops"), err?.message)
      })

    }, esp.lang("event/order_detail_upgrade_payment", "confirm_no"), () => { })

  }


  function percentageCalculator(amount: any, percent: any) {
    return (percent * amount) / 100
  }

  let amount = Number(selectedTicket?.selected_ticket?.amount_difference) * Number(dataTicket?.qty_upgrade)
  let _tax = percentageCalculator(amount, dataTicket?.tax_event)
  let subtotalWithTax = amount + _tax

  let _fee_platform_type = platformFee?.fee_platform_type
  let _fee_platform = _fee_platform_type == "NOMINAL" ? Number(platformFee?.fee_platform_amount || 0) : _fee_platform_type == "PERCENTAGE" ? percentageCalculator(amount, Number(platformFee?.fee_platform_amount || 0)) : 0

  let subtotalWithTaxWithFeePlatform = subtotalWithTax + _fee_platform

  let _charge = amount == 0 ? 0 : Number(charge)
  let _charge_percent = chargePercent == 0 ? 0 : percentageCalculator(subtotalWithTaxWithFeePlatform, chargePercent)
  let _charge_total = chargePercent ? _charge + _charge_percent : _charge

  let _amountTotal = Number(subtotalWithTaxWithFeePlatform) + Number(_charge_total)

  function renderSeatItem(item: any, i: number) {
    return (
      <View key={i} style={{ margin: 10, marginBottom: 0, marginRight: 5, marginLeft: 5, height: 32, width: 32, backgroundColor: LibStyle.colorBlue, borderWidth: 1, borderColor: LibStyle.colorBlue, borderRadius: 4, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{item}</Text>
      </View>
    )
  }


  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <EventHeader title={esp.lang("event/order_detail_upgrade_payment", "header_title")} />
      <ScrollView ref={scrollRef} stickyHeaderIndices={[0]} scrollEventThrottle={16} onScroll={({ nativeEvent }) => {
        const currentYPosition = nativeEvent.contentOffset.y
        const oldPosition = scrollYRef.current

        if (currentYPosition >= (LibStyle.height * 0.3)) {
          if (oldPosition == 0) {
            scrollYRef.current = nativeEvent.contentOffset.y
            BigbangPayment_detailProperty.stateShow.set(false)
          }
        }
      }}>
        {/* detail */}

        <View style={{ backgroundColor: 'white' }}>
          <BigbangPayment_detail
            ondate={dataTicket?.ondate}
            // onlyBboPay={bboPay}
            order_type={14}
            priceTotal={amount}
            charge={charge}
            fee_platform_type={platformFee?.fee_platform_type}
            fee_platform_amount={platformFee?.fee_platform_amount}
            charge_percent={chargePercent}
            // typeTicket={dataBookingEvent?.selected_ticket?.type}
            currency={selectedTicket?.selected_ticket?.currency}
            qty={dataTicket?.qty_upgrade}
            tax={dataTicket?.tax_event}
            name_seat={selectedTicket?.seat_name}
            onPressSeat={() => {
              dialogSeat.current?.show()
            }}
            title={esp.lang("event/order_detail_upgrade_payment", "upgrade_to", dataTicket?.price_name, selectedTicket?.selected_ticket?.price_name_to)}
            event_name={dataTicket?.event_title} />
        </View>


        <BigbangPayment_list
          eventId={dataTicket?.event_id}
          url_payment={dataTicket?.url_payment}
          onToggleCC={() => { scrollRef.current?.scrollToEnd({ animated: true }) }}
          order_type={14} // upgrade ticekt
          currency={selectedTicket?.selected_ticket?.currency}
          onPressPayment={(item: any) => {
            let payment = {
              ...item,
              payment_id: Number(item.id),
              payment_type: Number(item.type),
            }
            setSelectedPayment(payment)
            setPlatformFee({ fee_platform_type: item?.fee_platform_type || 'NONE', fee_platform_amount: item?.fee_platform_amount || 0 })
            setCharge(item.charge)
            setChargePercent(item.charge_percent)
          }}
          paymentId={selectedPayment?.payment_id}
          priceTotal={Number(_amountTotal)}
          chargeTotal={_charge_total}
        />
      </ScrollView>
      <View style={{ padding: 10 }}>
        <EventButton label={esp.lang("event/order_detail_upgrade_payment", "pay")} onPress={() => {
          if (selectedPayment?.payment_id == 2) /* BBO PAY */ {
            LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
              if (p) {
                doUpgrade(p)
              }
            })
          } else {
            doUpgrade()
          }
        }}
          fontColor='#fff'
          backgroundColor={selectedPayment ? "#00b894" : LibStyle.colorBgGrey}
        />
      </View>
      {/* ini dialog seat */}
      <LibSlidingup ref={dialogSeat}>
        <View style={{ backgroundColor: 'white', padding: 20 }} >
          <LibTextstyle text={esp.lang("bigbang/payment", "text_seat")} textStyle="headline" />
          <ScrollView >
            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
              {
                selectedTicket?.seat_name?.map(renderSeatItem)
              }
            </View>
          </ScrollView>
        </View>
      </LibSlidingup>
    </View>
  )
}