// withHooks
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import { useEffect, useRef } from 'react';

import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibWebview } from 'esoftplay/cache/lib/webview/import';
import { useTimeout } from 'esoftplay/timeout';
import LottieView from "lottie-react-native";
import React from 'react';
import { ScrollView, Text, View } from 'react-native';


export interface EventCoupon_claim_reimburse_history_detailArgs {

}
export interface EventCoupon_claim_reimburse_history_detailProps {

}
export default function m(props: EventCoupon_claim_reimburse_history_detailProps): any {
  const { url } = LibNavigation.getArgsAll(props)
  const [data, setData] = useSafeState<any>()
  const [error, setError] = useSafeState<string>("")
  const animation = useRef<LottieView>(null)
  const timeout = useTimeout()

  useEffect(() => {
    if (data) {
      timeout(() => {
        animation.current?.play()
      }, 300);
    }
  }, [data])

  useEffect(getData, [])

  function getData() {
    const curl = esp.mod("lib/curl")
    new curl(url, null, (result, message) => {
      esp.log(result)
      setData(result)
    }, (error) => {
      setError(error?.message)
    }, 1)
  }

  return (
    <View style={{ flex: 1 }}>
      <EventHeader title={esp.lang("event/coupon_claim_reimburse_history_detail", "header")} />
      <LibScroll onRefresh={getData}>
        {
          (!data && error == "") ? <LibLoading /> : error != "" ? <EventMessage message={error} />
            :
            <>
              <View style={{ alignItems: 'center', marginTop: 20 }} >
                {
                  <LottieView
                    ref={animation}
                    loop={false}
                    style={{
                      width: 200,
                      height: 200,
                    }}
                    source={esp.assets(data?.lottie)}
                  // OR find more Lottie files @ https://lottiefiles.com/featured
                  // Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
                  />
                }
              </View>

              <View style={{ marginHorizontal: 15, marginTop: 20, marginBottom: 15 }}>
                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 16, color: '#4a4a4a', textAlign: "center" }}>{LibUtils.ucwords(data?.status_text)}</Text>
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: '#4a4a4a', textAlign: "center", marginTop: 10 }}>{moment(data?.created).localeFormat("dddd, DD MMMM YYYY HH:mm:ss")}</Text>
                <View style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 30 }}>
                  <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", width: (LibStyle.width - 45) * 0.5 }}>
                    <Text allowFontScaling={false} style={{ fontSize: 14, color: "#000" }}>{esp.lang("event/coupon_claim_reimburse_history_detail", "nominal")}</Text>
                    <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 18, fontWeight: 'bold', color: "#000" }}>{LibUtils.money(data?.amount)}</Text>
                  </View>
                  <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", width: (LibStyle.width - 45) * 0.5 }}>
                    <Text allowFontScaling={false} style={{ fontSize: 14, color: "#000" }}>{esp.lang("event/coupon_claim_reimburse_history_detail", "qty")}</Text>
                    <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 18, fontWeight: 'bold', color: "#000" }}>{LibUtils.number(data?.qty)}</Text>
                  </View>
                </View>
                {
                  data?.notes && data?.notes != "" &&
                  <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", marginTop: 15 }}>
                    <Text allowFontScaling={false} style={{ fontSize: 14, color: "#000" }}>{"Alasan Penolakan"}</Text>
                    <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 18, fontWeight: 'bold', color: "#000" }}>{data?.notes}</Text>
                  </View>
                }
              </View>

              {
                data?.info && data?.info != "" && data?.info != null &&
                <View style={{ marginHorizontal: 15, padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1" }}>
                  <ScrollView>
                    <LibWebview source={{
                      html: `<style>body{background-color:#f1f1f1;}</style>${data?.info}`
                    }} onFinishLoad={() => { }} style={{ marginHorizontal: -20 }}
                    />
                  </ScrollView>
                </View>
              }
            </>
        }
        <View />
      </LibScroll>
    </View>
  )
}