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

import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import useLazyState from 'esoftplay/lazy';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventCoupon_claim_reimburseArgs {

}
export interface EventCoupon_claim_reimburseProps {

}
export default function m(props: EventCoupon_claim_reimburseProps): any {
  const { event_id, tenant_id } = esp.mod("lib/navigation").getArgsAll(props)
  const [reimburse, setReimburse] = useLazyState<any>()

  useEffect(() => {
    loadReimburse()
  }, [])

  function loadReimburse() {
    setReimburse(undefined)
    const curl = esp.mod("lib/curl")
    new curl("event_coupon_tenant_reimburse?event_id=" + event_id + "&tenant_id=" + tenant_id, null, (result, message) => {
      setReimburse(result)()
    }, (error) => {

    }, 1)
  }

  function submitReimburse() {
    const doSubmit = () => {
      const curl = esp.mod("lib/curl")
      esp.mod("lib/progress").show(esp.lang("event/coupon_claim_reimburse", "please_wait"))
      new curl("event_coupon_tenant_reimburse_submit", { tenant_id, event_id }, (result, message) => {
        loadReimburse()
        esp.modProp("lib/toast").show(message)
        esp.mod("lib/progress").hide()
        esp.mod("lib/navigation").navigate("event/coupon_claim_reimburse_history_detail", { url: result?.url })
      }, (error) => {
        esp.mod("lib/progress").hide()
        esp.mod("lib/dialog").warning(esp.lang("event/coupon_claim", "warning_reimburse"), error?.message)
      }, 1)
    }

    esp.mod('lib/dialog').warningConfirm(esp.lang("event/coupon_claim", "reimburse_title"),
      esp.lang("event/coupon_claim", "reimburse_msg"),
      esp.lang("event/coupon_claim", "reimburse_ok"), () => {
        doSubmit()
      },
      esp.lang("event/coupon_claim", "reimburse_cancel"), () => { })
  }

  return (
    <View style={{ flex: 1 }}>
      <EventHeader title={esp.lang("event/coupon_claim_reimburse", "reimburse")} subtitle={esp.lang("event/coupon_claim_reimburse", "reimburse_subtitle")} />
      <LibScroll onRefresh={loadReimburse}>
        <View style={{ margin: 5, marginBottom: 5, marginTop: 10, borderRadius: 10, padding: 10 }}>
          <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
            <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", width: (LibStyle.width - 45) * 0.5 }}>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", marginBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "total")}</Text>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", flex: 1, flexWrap: 'wrap', fontSize: 20, fontWeight: 'bold', color: "#000" }}>{LibUtils.number(reimburse?.qty)}</Text>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, color: LibStyle.colorBrown, marginTop: 5, textAlign: "right" }}>{esp.lang("event/coupon_claim_reimburse", "can_cashout")}</Text>
            </View>
            <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", width: (LibStyle.width - 45) * 0.5 }}>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", marginBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "amount")}</Text>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", flex: 1, flexWrap: 'wrap', fontSize: 20, fontWeight: 'bold', color: "#000" }}>{LibUtils.money(reimburse?.amount)}</Text>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, color: LibStyle.colorBrown, marginTop: 5, textAlign: "right" }}>{esp.lang("event/coupon_claim_reimburse", "can_cashout")}</Text>
            </View>
          </View>
        </View>
        <TouchableOpacity onPress={() => {
          esp.mod("lib/navigation").navigate("event/coupon_claim_reimburse_history", { event_id, tenant_id })
        }} style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", flexDirection: "row", alignItems: "center", marginHorizontal: 15 }}>
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", flex: 1, fontSize: 14, color: "#000" }}>{esp.lang("event/coupon_claim_reimburse", "history_cashout")}</Text>
          <LibIcon name='chevron-right' />
        </TouchableOpacity>

        <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#fff3cd", borderWidth: 1, borderColor: "#FDE68A", marginHorizontal: 15, marginTop: 15 }}>
          <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 18, color: "#000", textAlign: "justify", paddingBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "info")}</Text>
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", lineHeight: 17, textAlign: "justify", paddingBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "info1")}</Text>
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", lineHeight: 17, textAlign: "justify", paddingBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "info2")}</Text>
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", lineHeight: 17, textAlign: "justify", }}>{esp.lang("event/coupon_claim_reimburse", "info3")}</Text>
        </View>

      </LibScroll>
      <EventButton
        label={esp.lang("event/coupon_claim_reimburse", "doReimburse")}
        backgroundColor={reimburse?.qty == 0 ? "#f1f1f1" : undefined}
        onPress={() => {
          if (reimburse?.qty > 0) {
            submitReimburse()
          } else {
            esp.modProp("lib/toast").show(esp.lang("event/coupon_claim", "coupon_scan_empty"))
          }
        }}
        style={{ margin: 15 }}
      />
    </View>
  )
}