// withHooks
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/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 { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import { useEffect } from 'react';

import { EventConfigProperty } from 'esoftplay/cache/event/config/import';
import { EventStep } from 'esoftplay/cache/event/step/import';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

export interface EventOrder_detail_paymentProps {
  data: any
}
export default function m(props: EventOrder_detail_paymentProps): any {
  let data = LibNavigation.getArgs(props, 'data', props.data)
  let { from, va_no, fee_topup } = LibNavigation.getArgsAll(props)

  const [eventConfig] = EventConfigProperty.state().useState()

  useEffect(() => {
    EventConfigProperty.curlConfig('v2/config_topup_info')
  }, [])

  if (from == "fromTopUp") {
    return (
      <View style={{ flex: 1, backgroundColor: '#FFF' }}>
        <EventHeader title={esp.lang("event/order_detail_payment", "topup_payment_instruction")} />
        <LibScroll>
          {
            fee_topup != null && fee_topup != 0 &&
            <>
              <View style={{ marginBottom: 10, marginHorizontal: 17, marginTop: 20, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
                <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail_payment", "fee_topup")}</Text>
                <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#FB871C" }}>{"TopUp - " + LibUtils.money(fee_topup)}</Text>
              </View>
              <View style={{ height: 10, flex: 1, backgroundColor: LibStyle.colorBgGrey }} />
            </>
          }
          <View style={{ marginHorizontal: 17, marginTop: 10, paddingBottom: 5, marginBottom: 10, }} >
            <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#4a4a4a" }}>{esp.lang("event/order_detail_payment", "virtual_number_account")}</Text>
            <View style={{ marginTop: 10, flexDirection: "row", alignItems: "center", }}>
              <View style={{ flex: 1, backgroundColor: '#f1f2f3', borderRadius: 5, marginRight: 10, padding: 5 }} >
                <Text allowFontScaling={false} adjustsFontSizeToFit numberOfLines={1} style={{ fontSize: 30, fontStyle: "normal", fontFamily: 'DecoNumbers', letterSpacing: 0, textAlign: "left", color: LibStyle.colorPrimaryDark }}>{va_no.toString()}</Text>
              </View>
              <TouchableOpacity onPress={() => {
                LibUtils.copyToClipboard(va_no)
                LibToastProperty.show(esp.lang("event/order_detail_payment", "success_copied"))
              }} >
                <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", fontWeight: 'bold', letterSpacing: 0, color: LibStyle.colorPrimaryDark }} >{esp.lang("event/order_detail_payment", "copy")}</Text>
              </TouchableOpacity>
            </View>
          </View>

          {
            LibUtils.checkUndefined(eventConfig, 'topup_info.0') &&
            <View style={{ marginHorizontal: 15, backgroundColor: '#FDF1DE', padding: 15, borderRadius: 5, borderWidth: 1, borderColor: '#FC9722' }}>
              <View style={{ flexDirection: 'row', alignItems: 'center', paddingBottom: 5 }}>
                <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: 'bold', letterSpacing: 0.3, paddingRight: 5 }} >{esp.lang("event/order_detail_payment", "information")}</Text>
                <LibIcon.Ionicons name="information-circle" color="#FB871C" size={16} />
              </View>
              {
                eventConfig.topup_info.map((item: any, i: number) => {
                  if (eventConfig.topup_info.length > 1) {
                    return (
                      <View key={i} style={{ alignItems: "flex-start", flexDirection: "row", marginRight: 10 }} >
                        <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: "#FB871C", marginRight: 5, marginTop: 6 }} />
                        <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{item}</Text>
                      </View>
                    )
                  } else {
                    return (
                      <Text key={i} allowFontScaling={false} style={{ marginTop: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{item}</Text>
                    )
                  }
                })
              }
            </View>
          }
          <View style={{ marginTop: 10 }} />
          {
            Object.keys(data).map((key: any, i: number) => {
              let imgBank: any = ''
              let keyT = ''
              if (key == "atm") {
                imgBank = 'icons/ic_atm.png'
                keyT = esp.lang("event/order_detail_payment", "transfer_atm_instruction")
              } else if (key == "internet") {
                imgBank = 'icons/ic_ibank.png'
                keyT = esp.lang("event/order_detail_payment", "transfer_ibank_instruction")
              } else {
                imgBank = 'icons/ic_mbank.png'
                keyT = esp.lang("event/order_detail_payment", "transfer_mbanking_instruction")
              }
              return (
                <LibCollaps key={i} show={i == 2} header={(show) =>
                  <View style={[{ borderRadius: 5, marginVertical: 5, marginLeft: 15, marginRight: 15, 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, 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 && data.atm && data[key].length > 0 && data[key].map((item: any, i: number) => {
                      return (
                        <View key={i} style={{ marginHorizontal: 15 }} >
                          <EventStep text={item} />
                        </View>
                      )
                    })
                  }
                </LibCollaps>
              )
            })
          }
        </LibScroll>
      </View>
    )
  }


  return (
    <View style={{ flex: 1, backgroundColor: '#FFF' }}>
      <EventHeader title={esp.lang("event/order_detail_payment", "payment_instruction")} />
      <LibScroll>
        {
          Object.keys(data).map((key: any, i: number) => {
            return (
              <View key={i} style={{ borderWidth: 1, borderColor: '#9e9e9e', marginTop: 5, margin: 20, borderTopLeftRadius: 5, borderTopRightRadius: 5, paddingBottom: 10, marginBottom: 10 }}>
                <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={"tail"} style={{ borderBottomColor: '#9e9e9e', borderBottomWidth: 1, textAlignVertical: 'center', margin: 10, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{key.toUpperCase()}</Text>
                {
                  data && data.atm && data[key].length > 0 && data[key].map((item: any, i: number) => {
                    return (
                      <EventStep key={i} text={item} />
                    )
                  })
                }
              </View>
            )
          })
        }
      </LibScroll>
    </View>
  )
}