// withHooks
import { useEffect } from 'react';

import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventCoupon_generate_listArgs {

}
export interface EventCoupon_generate_listProps {

}
export default function m(props: EventCoupon_generate_listProps): any {

  const key = esp.mod("lib/navigation").getResultKey(props)
  const event_id = esp.mod("lib/navigation").getArgs(props, "event_id")

  useEffect(() => {
    return () => esp.mod("lib/navigation").cancelBackResult(key)
  }, [])


  return (
    <View style={{ flex: 1 }}>
      <EventHeader title={esp.lang("event/coupon_generate_list", "list_coupon")} subtitle={esp.lang("event/coupon_generate_list", "list_coupon_can_generate")} notif />
      <LibInfinite
        url={'event_coupon_admin?event_id=' + event_id}
        renderItem={(item, i) => {
          return (
            <View style={{ flex: 1 }} key={i}>
              <TouchableOpacity onPress={() => {
                esp.mod("lib/navigation").sendBackResult(item, key)
              }} style={[{ marginBottom: 4, margin: 15, borderRadius: 10, backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
                <LibPicture source={{ uri: item?.image }} resizeMode="cover" style={{ height: (LibStyle.width - 30) * 0.43, width: LibStyle.width - 30, borderRadius: 10 }} />
                <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?.coupon_title}</Text>
                </View>
                <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: "white", marginLeft: -9.5 }} />
                  <View style={{ flex: 1 }} />
                  <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginRight: -9.5 }} />
                </View>
              </TouchableOpacity>
            </View>
          )
        }}
      />
    </View>
  )
}