// withHooks
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

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


export interface EventCounter_reportArgs {

}
export interface EventCounter_reportProps {

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

  const { event_id, status_user } = LibNavigation.getArgsAll(props)
  const [result, setResult] = useSafeState<any>()
  const [error, setError] = useSafeState<any>()

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

  function loadData() {
    new LibCurl("event_manager_seller_ticket&event_id=" + event_id, null, (res, msg) => {
      setResult(res)
    }, (error) => {
      setError(error)
    }, 1)
  }

  function renderItem(item: any, i: number) {
    return (
      <TouchableOpacity key={i} onPress={() => { LibNavigation.navigate('event/counter_report_detail', { url: item.url }) }} style={styleId_2eynEH}>
        <View style={styleId_1AVyQt}>
          <View style={styleId_1C9dY0}>
            <LibPicture source={{ uri: item.image }} style={styleId_ZXW56z} resizeMode="cover" />
          </View>
          <View style={styleId_Nnnug}>
            <Text allowFontScaling={false} style={styleId_Z2nlhWI}>{item.name}</Text>
            <Text allowFontScaling={false} style={styleId_Z15uvuH}>{item.email}</Text>
          </View>

        </View>
        <LibIcon name={"chevron-right-circle-outline"} />
      </TouchableOpacity>
    )
  }

  return (
    <View style={{ flex: 1, backgroundColor: "#EEF1F8" }}>
      <EventHeader title={esp.lang("event/counter_report", "header_title")} subtitle={status_user == 1 ? esp.lang("event/counter_report", "sub_eo") : status_user == 2 ? esp.lang("event/counter_report", "sub_lm") : esp.lang("event/counter_report", "sub_cashier")} />
      <KeyboardAvoidingView style={{ flex: 1 }}>
        <LibList
          data={result}
          onRefresh={loadData}
          ListHeaderComponent={() => {
            return (
              <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 15, paddingBottom: 0 }}>
                <View />
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#000" }}>{LibUtils.getCurrentDateTime("DD MMMM YYYY")}</Text>
              </View>
            )
          }}
          ListEmptyComponent={() => {
            if (error) {
              return (
                <View style={{ margin: 15, borderRadius: 15, marginBottom: 0, backgroundColor: '#fff', overflow: 'hidden' }}>
                  <EventMessage message={error?.message} />
                </View>
              )
            } else {
              return (
                <View style={{ flex: 1, height: LibStyle.height - (LibStyle.STATUSBAR_HEIGHT + 60), alignContent: 'center', alignItems: 'center', alignSelf: 'center', justifyContent: 'center' }}>
                  <LibLoading />
                </View>
              )
            }
          }}
          renderItem={renderItem}
        />

      </KeyboardAvoidingView>
    </View>
  )
}

const styleId_Z2nlhWI: any = { flexWrap: 'wrap', fontFamily: 'SFProText', fontWeight: 'bold' }
const styleId_Z15uvuH: any = { flexWrap: 'wrap', fontWeight: 'normal', fontSize: 10 }
const styleId_ZXW56z: any = { height: 50, width: 50, borderRadius: 10 }
const styleId_2eynEH: any = { margin: 15, marginBottom: 2, padding: 10, justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', flexDirection: 'row', borderRadius: 15, backgroundColor: '#fff', ...LibStyle.elevation(2) }
const styleId_1AVyQt: any = { flexDirection: 'row', alignContent: 'center', alignItems: 'center' }
const styleId_1C9dY0: any = { height: 50, width: 50, borderRadius: 10, backgroundColor: '#fff', ...LibStyle.elevation(10) }
const styleId_Nnnug: any = { marginLeft: 8 }