// withHooks
import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';
import useLazyState from 'esoftplay/lazy';
import { useEffect } from 'react';

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


export interface EventCoupon_generate_eventArgs {

}
export interface EventCoupon_generate_eventProps {

}
export default function m(props: EventCoupon_generate_eventProps): any {
  const [result, setResult] = useLazyState<any>()
  const [error, setError] = useLazyState<string>("")

  const imgWidth = LibStyle?.width - 30
  const imgHeight = imgWidth / 1920 * 1080

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

  function loadEvent() {
    const curl = esp.mod("lib/curl")
    new curl("event_coupon_admin_event", null,
      (result) => {
        if (result.length > 1) {
          setResult(result)()
        } else {
          esp.mod("lib/navigation").replace("event/coupon_generate", { ...result?.[0] })
        }
      }, (error) => {
        setError(error?.message)()
      }, 1)
  }


  return (
    <View style={{ flex: 1 }}>
      <EventHeader title={"Daftar Event"} />
      {
        (!result && error == "") ?
          <LibSkeleton>
            <LibSkeleton.BoxFull size={imgHeight} />
            <LibSkeleton.BoxFull size={imgHeight} />
            <LibSkeleton.BoxFull size={imgHeight} />
          </LibSkeleton>
          :
          <LibList
            onRefresh={loadEvent}
            data={result}
            ListEmptyComponent={
              error != "" ? <EventMessage message={error} /> : null
            }
            renderItem={(item: any, index: number) => (
              <Pressable key={index} onPress={() => {
                esp.mod("lib/navigation").navigate("event/coupon_generate", { ...item })
              }} style={{ marginHorizontal: 15, marginTop: 15 }} >
                <LibPicture source={{ uri: item?.image }} style={{ width: imgWidth, height: imgHeight, borderRadius: 10, resizeMode: 'cover', backgroundColor: '#f1f2f3' }} />
                <View style={{ backgroundColor: "rgba(0, 0, 0, 0.5)", position: 'absolute', borderBottomLeftRadius: 10, borderBottomRightRadius: 10, bottom: 0, left: 0, right: 0, padding: 10 }}>
                  <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{item?.event_name}</Text>
                </View>
              </Pressable>
            )}
          />
      }
    </View>
  )
}