// withHooks
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInput } from 'esoftplay/cache/lib/input/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/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 useSafeState from 'esoftplay/state';
import { useEffect, useRef } from 'react';

import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventCoupon_claim_detailArgs {
  code: string
  staff_id?: any
}
export interface EventCoupon_claim_detailProps {

}
export default function m(props: EventCoupon_claim_detailProps): any {
  const code = LibNavigation.getArgs(props, "code")
  const staff_id = LibNavigation.getArgs(props, "staff_id")
  const [data, setData] = useSafeState<any>()
  const [error, setError] = useSafeState<string>('')
  const [qty, setQty, getQty] = useLazyState<number>(1)
  const inputRef = useRef<LibInput>(null)

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

  function loadData() {
    const curl = esp.mod("lib/curl")
    new curl("event_coupon_redeem", { code, staff_id }, (result, message) => {
      setQty(1)
      setData(result)
    }, (error) => {
      setError(error?.message)
    }, 1)
  }

  function doRedeem() {
    const post = { id: data?.id, staff_id, qty: getQty() }

    const curl = esp.mod("lib/curl")
    esp.mod("lib/progress").show(esp.lang("event/coupon_claim_detail", "please_wait"))
    new curl("event_coupon_redeem_submit", post, (result, message) => {
      esp.modProp("event/coupon_claim").subscribe.trigger()
      esp.mod("lib/progress").hide()
      esp.modProp("lib/toast").show(message)
      esp.mod("lib/navigation").back()
    }, (error) => {
      esp.mod("lib/progress").hide()
      esp.mod("lib/dialog").warning(esp.lang("event/coupon_claim_detail", "warning"), error?.message)
    }, 1)
  }

  function addQTY() {
    if (getQty() < Number(data?.qty)) {
      setQty(x => x + 1)()
      inputRef.current?.setText(String(getQty()))
    }
  }

  function subQTY() {
    if (getQty() != 1) {
      setQty(x => x - 1)()
      inputRef.current?.setText(String(getQty()))
    }
  }

  return (
    <View style={{ flex: 1, backgroundColor: "#e6e6e6" }}>
      <EventHeader title={esp.lang("event/coupon_claim_detail", "header")} />
      {
        (!data && error == "") ? <LibLoading /> : error != "" ?
          <>
            <EventMessage message={error} />
            <EventButton label={esp.lang("event/coupon_claim_detail", "rescan")} style={{ marginHorizontal: 20 }} onPress={() => {
              esp.mod("lib/navigation").navigateForResult("component/scanner", null, 238).then((value) => {
                esp.mod("lib/navigation").replace("event/coupon_claim_detail", { code: value, staff_id: staff_id })
              })
            }} />
          </>
          :
          <>
            <LibScroll>

              <View>
                <View style={{ backgroundColor: "white", margin: 20, borderRadius: 20 }}>
                  <Text allowFontScaling={false} numberOfLines={2} style={{ marginTop: 10, fontFamily: "ArialBold", fontSize: 18, fontWeight: "bold", letterSpacing: 3.5, color: "#aeacb2", textAlign: 'center' }}>{data?.code}</Text>
                  <View style={{ padding: 15, paddingBottom: 20, marginTop: 20 }}>
                    {
                      data?.event_name && data?.event_name != "" &&
                      <>
                        <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{esp.lang("event/coupon_detail", "event_name")}</Text>
                        <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{data?.event_name}</Text>
                      </>
                    }
                    {
                      data?.title && data?.title != "" &&
                      <>
                        <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{esp.lang("event/coupon_detail", "coupon_name")}</Text>
                        <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{data?.title}</Text>
                      </>
                    }
                    {
                      data?.amount && data?.amount != "" && data?.amount != 0 &&
                      <>
                        <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{esp.lang("event/coupon_detail", "amount")}</Text>
                        <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{LibUtils.money(data?.amount)}</Text>
                      </>
                    }
                    {
                      data?.qty && data?.qty != "" &&
                      <>
                        <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{"Qty Kupon"}</Text>
                        <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{LibUtils.number(data?.qty)}</Text>
                      </>
                    }

                    {
                      data?.qty && data?.qty > 1 &&
                      <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "center", marginTop: 20 }}>
                        <TouchableOpacity onPress={subQTY} style={{ borderRadius: 10, width: 40, height: 40, alignItems: "center", justifyContent: "center", backgroundColor: "#f1f1f1" }}>
                          <LibIcon name='minus' size={24} color={LibStyle.colorRed} />
                        </TouchableOpacity>
                        <View style={{ marginHorizontal: 5, width: 60, height: 40, borderRadius: 10, backgroundColor: "#f1f1f1" }}>
                          <LibInput
                            ref={inputRef}
                            base
                            defaultValue={String(qty)}
                            onChangeText={(x) => {
                              if (Number(x) > Number(data?.qty)) {
                                setQty(data?.qty)()
                                inputRef.current?.setText(String(data?.qty))
                              }
                            }}
                            keyboardType='numeric'
                            style={{ flex: 1, fontFamily: "ArialBold", fontSize: 28, textAlign: "center", paddingHorizontal: 10 }}
                          />
                        </View>
                        <TouchableOpacity onPress={addQTY} style={{ borderRadius: 10, width: 40, height: 40, alignItems: "center", justifyContent: "center", backgroundColor: "#f1f1f1" }}>
                          <LibIcon name='plus' size={24} color={LibStyle.colorGreen} />
                        </TouchableOpacity>
                      </View>
                    }


                  </View>
                </View>
                <View style={{ backgroundColor: "#e6e6e6", width: 30, height: 30, borderRadius: 15, position: "absolute", left: 8, top: 60 }} />
                <View style={{ backgroundColor: "#e6e6e6", width: 30, height: 30, borderRadius: 15, position: "absolute", right: 8, top: 60 }} />
                <View style={{ borderTopWidth: 1, borderColor: "#908d94", borderStyle: "dashed", height: 0, position: "absolute", top: 75, left: 37, right: 37 }} />
              </View>

              <View />
            </LibScroll>
            <EventButton label={esp.lang("event/coupon_claim_detail", "redeem")} onPress={() => {
              esp.mod("lib/dialog").warningConfirm(esp.lang("event/coupon_claim_detail", "redeem_confirm"), esp.lang("event/coupon_claim_detail", "redeem_message"), esp.lang("event/coupon_claim_detail", "redeem_ok"), () => {
                doRedeem()
              }, esp.lang("event/coupon_claim_detail", "redeem_cancel"), () => { })
            }} style={{ margin: 15 }} />
          </>
      }
    </View >
  )
}