// withHooks

import { applyStyle } from 'esoftplay';
import { EventCoupon_claim_history } from 'esoftplay/cache/event/coupon_claim_history/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/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 useGlobalSubscriber from 'esoftplay/subscribe';
import React, { useEffect } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventCoupon_claimArgs {

}
export interface EventCoupon_claimProps {

}

export const subscribe = useGlobalSubscriber()

export default function m(props: EventCoupon_claimProps): any {
  const { event_id, event_name } = esp.mod("lib/navigation").getArgsAll(props)
  const [tenant, setTenant] = useLazyState<any>()
  const [errorTenant, setErrorTenant] = useLazyState<string>("")
  const [redeemed, setRedeemed] = useLazyState<any>()
  const [errorRedeemed, setErrorRedeemed] = useSafeState<string>("")
  const [key, setKey] = useSafeState<number>(1)

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

  subscribe.useSubscribe(() => {
    loadAll()
    setKey(k => k + 1)
  })

  const loadAll = () => {
    loadDataTenant()
  }

  function loadDataTenant() {
    const curl = esp.mod("lib/curl")
    new curl("event_coupon_tenant?event_id=" + event_id, null, (result, message) => {
      esp.log(result);
      setTenant(result)()
      if (result?.is_parent == 1) {
        loadRedeemedCoupon(result?.tenant_id)
      }
    }, (err) => {
      setErrorTenant(err?.message)
    }, 1)
  }

  function loadRedeemedCoupon(tenant_id: string) {
    setRedeemed(undefined)
    const curl = esp.mod("lib/curl")
    new curl("event_coupon_tenant_redeemed?event_id=" + event_id + "&tenant_id=" + tenant_id, null, (result, message) => {
      setRedeemed(result)()
    }, (error) => {
      setErrorRedeemed(error?.message)
    }, 1)
  }

  function RenderMenu(props: any) {
    return (
      <TouchableOpacity onPress={props.onPress} style={applyStyle({ flex: 1, alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
        <View style={applyStyle({ backgroundColor: 'rgba( 255, 255, 255, 0.40 )', padding: 15, borderRadius: 10 })}>
          <LibIcon name={props?.icon} style={applyStyle({ opacity: 1 })} color="#fff" />
        </View>
        <Text allowFontScaling={false} style={applyStyle({ height: 30, textAlign: 'center', fontFamily: 'SFProText', margin: 10, marginTop: 5, color: '#fff', marginBottom: 0, fontSize: 10 })}>{props?.title}</Text>
      </TouchableOpacity>
    )
  }

  return (
    <View style={{ flex: 1 }}>
      <EventHeader title={tenant?.is_parent == 1 ? esp.lang("event/coupon_claim", "manage_coupon") : esp.lang("event/coupon_claim", "header_title")} subtitle={tenant?.is_parent == 1 ? esp.lang("event/coupon_claim", "manage_coupon_sub", event_name) : esp.lang("event/coupon_claim", "header_sub")} bgColor={"#95a5a6"} titleColor="#fff" notif />
      {
        (!tenant && errorTenant == "") ?
          <LibSkeleton>
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              <LibSkeleton.BoxFlex size={80} />
              <LibSkeleton.BoxFlex size={80} />
              <LibSkeleton.BoxFlex size={80} />
              <LibSkeleton.BoxFlex size={80} />
            </View>
            <LibSkeleton.BoxFull size={(LibStyle.width - 60) * 0.43} />
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              <LibSkeleton.BoxFlex size={80} />
              <LibSkeleton.BoxFlex size={80} />
            </View>
          </LibSkeleton>
          :
          errorTenant != "" ? <EventMessage message={errorTenant} />
            :
            <>
              <View style={applyStyle({ paddingBottom: 30, padding: 15, backgroundColor: "#95a5a6", flexDirection: 'row', justifyContent: 'space-between' })}>
                {
                  tenant?.is_parent == 1 &&
                  <>
                    <RenderMenu title={esp.lang("event/coupon_claim", "withdraw")} icon="currency-usd" onPress={() => {
                      esp.mod("lib/navigation").navigate("event/coupon_claim_reimburse", { event_id, tenant_id: tenant?.tenant_id })
                    }} />
                    <RenderMenu title={"Pegawai"} icon="account" onPress={() => {
                      esp.mod("lib/navigation").navigate("event/coupon_claim_staff", { event_id, tenant_id: tenant?.tenant_id })
                    }} />
                  </>
                }
                <RenderMenu title={esp.lang("event/coupon_claim", "claim_report")} icon="history" onPress={() => {
                  esp.mod("lib/navigation").navigate("event/coupon_claim_history", { event_id, config: tenant })
                }} />
                <RenderMenu title={esp.lang("event/coupon_claim", "scan_voucher")} icon="qrcode-scan" onPress={() => {
                  esp.mod("lib/navigation").navigateForResult("component/scanner", null, 989348).then((value) => {
                    esp.mod("lib/navigation").navigate("event/coupon_claim_detail", { code: value, staff_id: tenant?.staff_id })
                  })
                }} />
              </View>

              <LibScroll style={{ marginTop: -20, backgroundColor: "#EEF1F8", borderTopLeftRadius: 15, borderTopRightRadius: 15 }} onRefresh={loadAll} >

                {
                  tenant?.is_parent == 1 &&
                  <>
                    {
                      tenant?.images && tenant?.images.length > 0 &&
                      <LibCarrousel
                        delay={3000}
                        style={{ height: (LibStyle.width - 30) * 0.43, width: LibStyle.width, marginTop: 17 }}
                        autoplay
                        bullets
                        bulletStyle={{ width: 7, height: 7, backgroundColor: "#fff", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
                        chosenBulletStyle={{ width: 7, height: 7, backgroundColor: "#f4e31b", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
                        bulletsContainerStyle={{ marginBottom: -10 }}>
                        {
                          tenant?.images?.map((item: any, index: number) => (
                            <View key={index} style={[{ borderRadius: 15, backgroundColor: '#fff', marginHorizontal: 15 }, LibStyle.elevation(2)]}>
                              <LibPicture source={{ uri: item?.image }} resizeMode="cover" style={{ height: (LibStyle.width - 30) * 0.43, width: LibStyle.width - 30, borderRadius: 5 }} />
                              <View style={{ position: 'absolute', top: (((LibStyle.width - 30) * 0.43) / 2) - 10, marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between' }} >
                                <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "#EEF1F8", marginLeft: -9.5 }} />
                                <View style={{ flex: 1 }} />
                                <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "#EEF1F8", marginRight: -9.5 }} />
                              </View>
                            </View>

                          ))
                        }
                      </LibCarrousel>
                    }
                    {
                      (!redeemed && errorRedeemed == "") ?
                        <View style={{ marginHorizontal: 15, marginVertical: 10, height: 70, flex: 1 }}>
                          <LibSkeleton>
                            <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
                              <View style={{ width: (LibStyle.width - 45) * 0.5, height: 60, borderRadius: 15, backgroundColor: "white" }} />
                              <View style={{ width: (LibStyle.width - 45) * 0.5, height: 60, borderRadius: 15, backgroundColor: "white" }} />
                            </View>
                          </LibSkeleton>
                        </View>
                        :
                        <View style={{ margin: 5, marginBottom: 10, marginTop: 10, borderRadius: 15, padding: 10 }}>
                          <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
                            <TouchableOpacity onPress={() => { }} style={{ padding: 15, borderRadius: 15, backgroundColor: "white", width: (LibStyle.width - 45) * 0.5 }}>
                              <Text allowFontScaling={false} style={{ fontSize: 10, color: "#000" }}>{esp.lang("event/coupon_claim", "total_coupon")}</Text>
                              <Text allowFontScaling={false} style={{ flex: 1, flexWrap: 'wrap', fontSize: 16, fontWeight: 'bold', color: "#000" }}>{LibUtils.number(redeemed?.qty)}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => { }} style={{ padding: 15, borderRadius: 15, backgroundColor: "white", width: (LibStyle.width - 45) * 0.5 }}>
                              <Text allowFontScaling={false} style={{ fontSize: 10, color: "#000" }}>{esp.lang("event/coupon_claim", "amount_coupon")}</Text>
                              <Text allowFontScaling={false} style={{ flex: 1, flexWrap: 'wrap', fontSize: 16, fontWeight: 'bold', color: "#000" }}>{LibUtils.money(redeemed?.amount)}</Text>
                            </TouchableOpacity>
                          </View>
                        </View>
                    }
                  </>
                }

                {
                  tenant && tenant?.is_parent && tenant?.is_parent == 0 &&
                  <EventCoupon_claim_history hideHeader={true} config={tenant} event_id={event_id} key={key} />
                }

              </LibScroll>
            </>

      }
    </View >
  )
}