// withHooks
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import esp from 'esoftplay/esp';
import { useEffect } from 'react';

import { applyStyle } from 'esoftplay';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import useSafeState from 'esoftplay/state';
import React from 'react';
import { Pressable, Text, View } from 'react-native';


export interface EventCoupon_claim_reimburse_historyArgs {

}
export interface EventCoupon_claim_reimburse_historyProps {

}
export default function m(props: EventCoupon_claim_reimburse_historyProps): any {
  const { event_id, tenant_id } = esp.mod("lib/navigation").getArgsAll(props)
  const [datas, setDatas] = useSafeState<any>()
  const [error, setError] = useSafeState<string>("")

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

  function loadData() {
    new LibCurl("event_coupon_tenant_reimburse_list?event_id=" + event_id + "&tenant_id=" + tenant_id, null, (result) => {
      esp.log({ result });
      setDatas(result)
    }, (error) => {
      setError(error?.message)
    })
  }

  return (
    <View style={{ flex: 1 }}>
      <EventHeader title={esp.lang("event/coupon_claim_reimburse_history", "reimburse_history")} />
      {
        <LibList
          onRefresh={loadData}
          data={datas}
          ListEmptyComponent={
            (!datas && error == "") ? <LibLoading /> :
              error != "" ? <EventMessage message={error} style={{ marginTop: 50 }} /> : null
          }
          renderItem={(item: any, index: number) => (
            <Pressable key={index} onPress={() => {
              esp.mod("lib/navigation").navigate("event/coupon_claim_reimburse_history_detail", { url: item?.url })
            }} style={applyStyle({ padding: 10, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomColor: "#EEF1F8", borderBottomWidth: 1 })}>
              <View style={applyStyle({ flex: 3 })}>
                <Text allowFontScaling={false} style={applyStyle({ fontSize: 16, marginBottom: 5 })}>{item?.status_text}</Text>
                <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, color: "#797979" })}>{LibUtils.moment(item?.created).serverFormat("DD MMMM YYYY HH:mm:ss")}</Text>
              </View>
              <View>
                <Text allowFontScaling={false} style={applyStyle({ marginBottom: 5, textAlign: 'right', fontWeight: 'bold', fontSize: 14, color: LibStyle.colorGreen })}>{esp.lang("event/coupon_claim_reimburse_history", "qty", LibUtils.number(item?.qty))}</Text>
                <Text allowFontScaling={false} style={applyStyle({ textAlign: 'right', fontWeight: 'bold', fontSize: 14, color: LibStyle.colorRed })}>{LibUtils.money(item?.amount)}</Text>
              </View>
            </Pressable>
          )}
        />
      }
    </View>
  )
}