// withHooks
// noPage
import { LibIcon } from 'esoftplay/cache/lib/icon/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 { Pressable, Text, TouchableOpacity, View } from 'react-native';


export interface EventCounter_user_list_itemArgs {

}
export interface EventCounter_user_list_itemProps {
  email: string,
  user_id: string,
  image: string,
  name: string,
  showType?: boolean,
  type?: any,
  showIcon?: boolean,
  onSelect?: () => void,
  showDelete?: boolean,
  onDelete?: () => void,
  selectedUserId?: any,
  showChange?: boolean,
  onChange?: () => void,
  style?: any,
  sellers?: any,
  showSellers?: boolean,
  showDeleteSellers?: boolean,
  onDeleteSellers?: (email?: string) => void,
  is_digital?: any
}
export default function m(props: EventCounter_user_list_itemProps): any {

  function renderSellers(item: any, i: number) {
    return (
      <View key={i} style={styleId_ZuJdEN}>
        <View style={styleId_Z1IS0fI}>
          <View style={styleId_1C9dY0}>
            <LibPicture source={{ uri: item.image }} style={styleId_1XoYWW} resizeMode="cover" />
          </View>
          <View style={styleId_Zkxxg6}>
            <View style={styleId_Z1IS0fI}>
              <View style={{ marginTop: 4, padding: 5, borderRadius: 5, backgroundColor: '#6A0740' }}>
                <Text allowFontScaling={false} style={styleId_Z1tkqXS}>{item.is_digital == "1" ? esp.lang("event/counter_user_list_item", "ticket_online") : esp.lang("event/counter_user_list_item", "ticket_fisik")}</Text>
              </View>
            </View>
            <Text allowFontScaling={false} style={styleId_1KmPaS}>{item.name}</Text>
            <Text allowFontScaling={false} style={styleId_Z15uvuH}>{item.email}</Text>

          </View>
        </View>
        {
          props.showDeleteSellers &&
          <TouchableOpacity onPress={() => { props.onDeleteSellers && props.onDeleteSellers(item.email) }} style={styleId_ZkUJq} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} >
            <LibIcon name={"trash-can-outline"} size={18} color={LibStyle.colorRed} />
          </TouchableOpacity>
        }
      </View>
    )
  }

  const styleId_ZVzM0y: any = { justifyContent: 'center', alignContent: 'center', alignItems: 'center', backgroundColor: props.type == 1 ? "#009AE4" : props.type == 2 ? "#00AA43" : "#6A0740", marginTop: 5, padding: 2, borderRadius: 3 }

  return (
    <View>
      <Pressable onPress={() => { props.onSelect && props.onSelect() }} style={[{ margin: 15, marginBottom: 10, marginTop: 0, backgroundColor: '#fff', padding: 10, borderRadius: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }, props.style]}>
        <View style={styleId_2vi46p}>
          <View style={styleId_1C9dY0}>
            <LibPicture source={{ uri: props.image }} style={styleId_1XoYWW} resizeMode="cover" />
          </View>

          <View style={styleId_Zkxxg6}>

            {
              props.showType &&
              <View style={styleId_Z1IS0fI}>
                <View style={styleId_ZVzM0y}>
                  <Text allowFontScaling={false} style={styleId_Z7sv3V}>{props.type == 1 ? esp.lang("event/counter_user_list_item", "text_eo") : props.type == 2 ? esp.lang("event/counter_user_list_item", "text_lm") : esp.lang("event/counter_user_list_item", "text_cashier")}</Text>
                </View>
              </View>
            }
            {
              props.is_digital &&
              <View style={styleId_Z1IS0fI}>
                <View style={{ marginTop: 4, padding: 5, borderRadius: 5, backgroundColor: '#6A0740' }}>
                    <Text allowFontScaling={false} style={styleId_Z1tkqXS}>{props.is_digital == "1" ? esp.lang("event/counter_user_list_item", "ticket_online") : esp.lang("event/counter_user_list_item", "ticket_fisik")}</Text>
                </View>
              </View>
            }
            <Text allowFontScaling={false} style={styleId_Z2nlhWI}>{props.name}</Text>
            <Text allowFontScaling={false} style={styleId_Z15uvuH}>{props.email}</Text>
          </View>
        </View>
        {
          props.showIcon &&
          <TouchableOpacity onPress={() => { props.onSelect && props.onSelect() }} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} >
            <LibIcon name={props.selectedUserId == props.user_id ? "radiobox-marked" : "radiobox-blank"} color={props.selectedUserId == props.user_id ? "#009AE4" : "#000"} />
          </TouchableOpacity>
        }
        {
          props.showDelete &&
          <TouchableOpacity onPress={() => { props.onDelete && props.onDelete() }} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} >
            <LibIcon name={"trash-can-outline"} color={LibStyle.colorRed} />
          </TouchableOpacity>
        }
        {
          props.showChange &&
          <TouchableOpacity onPress={() => { props.onChange && props.onChange() }} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} style={styleId_Z56B3G} >
            <Text allowFontScaling={false} style={{ color: LibStyle.colorGreen }} >{esp.lang("event/counter_user_list_item", "edit")}</Text>
          </TouchableOpacity>
        }
      </Pressable>
      {
        props.showSellers && props.sellers && props.sellers?.length > 0 &&
        <View style={styleId_Z2iLXe1}>
          <Text allowFontScaling={false} style={styleId_ZeUrgO}>{esp.lang("event/counter_user_list_item", "cashier_list")}</Text>
          {
            props.sellers?.map?.(renderSellers)
          }
        </View>
      }
    </View>
  )
}
const styleId_ZuJdEN: any = { flexDirection: 'row', justifyContent: 'space-between', padding: 10, borderBottomColor: "#EEF1F8", borderBottomWidth: 1, alignContent: 'center', alignItems: 'center' }
const styleId_Z1IS0fI: any = { flexDirection: 'row' }
const styleId_1C9dY0: any = { height: 50, width: 50, borderRadius: 10, backgroundColor: '#fff', ...LibStyle.elevation(10) }
const styleId_1XoYWW: any = { height: 50, width: 50, borderRadius: 10, }
const styleId_Zkxxg6: any = { marginLeft: 10 }
const styleId_Z1tkqXS: any = { fontWeight: 'normal', fontSize: 10, color: '#fff' }
const styleId_1KmPaS: any = { fontSize: 14, flexWrap: 'wrap', fontFamily: 'SFProText', fontWeight: 'bold' }
const styleId_Z15uvuH: any = { flexWrap: 'wrap', fontWeight: 'normal', fontSize: 10 }
const styleId_ZkUJq: any = { padding: 7, borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }
const styleId_2vi46p: any = { flex: 2, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }
const styleId_Z7sv3V: any = { textAlign: 'center', fontFamily: "Arial", fontSize: 8, fontWeight: "normal", fontStyle: "normal", letterSpacing: 1, color: "#fff" }
const styleId_Z2nlhWI: any = { flexWrap: 'wrap', fontFamily: 'SFProText', fontWeight: 'bold' }
const styleId_Z56B3G: any = { marginRight: 10, padding: 2, paddingHorizontal: 10, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorGreen }
const styleId_Z2iLXe1: any = { margin: 20, marginTop: -8, borderBottomLeftRadius: 15, borderBottomRightRadius: 15, backgroundColor: '#fff' }
const styleId_ZeUrgO: any = { marginTop: 5, alignSelf: 'center', flexWrap: 'wrap', fontFamily: 'SFProText', fontWeight: 'bold' }