// withHooks

import { applyStyle } from 'esoftplay';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/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 { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import esp from 'esoftplay/esp';
import useGlobalSubscriber, { useGlobalSubscriberReturn } from 'esoftplay/subscribe';
import React, { useRef } from 'react';
import { Pressable, Text, TouchableOpacity, View } from 'react-native';

export interface EventTmsArgs {

}
export interface EventTmsProps {

}
const subs = useGlobalSubscriber()
export function subscribe(): useGlobalSubscriberReturn {
  return subs
}

export default function m(props: EventTmsProps): any {
  const { dataEO } = LibNavigation.getArgsAll<any>(props)
  const ref = useRef<LibInfinite>(null)

  function deleteTMS(url: string, name: string, index: number) {
    LibDialog.warningConfirm(esp.lang("event/tms", "del_title"), esp.lang("event/tms", "del_msg", name), esp.lang("cashier/list", "dialog_delete_yes"), () => {
      new LibCurl(url, null, (res, msg) => {
        LibToastProperty.show(msg)
        ref?.current?.loadData?.()
      }, (msg) => {
        LibDialog.warning(esp.lang("event/tms", "del_failed"), msg.message)
      })
    }, esp.lang("cashier/list", "dialog_delete_cancel"), () => { })
  }

  function renderItem(item: any, index: number) {
    return (
      <TouchableOpacity onPress={() => {
        let dataEvent = {
          id: dataEO?.id
        }
        LibNavigation.navigate('event/tms_add_result', { dataEvent: dataEvent, email: item.email.trim() })
      }} key={index} style={applyStyle({ padding: 10, marginBottom: 4, flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', borderRadius: 4, marginHorizontal: 10, marginTop: 10, borderLeftWidth: 2, borderLeftColor: LibStyle.colorGreen, ...LibStyle.elevation(2) })} >
        <LibPicture source={{ uri: item.image }} style={applyStyle({ height: 40, width: 40, borderRadius: 20, backgroundColor: LibStyle.colorLightGrey })} />
        <View style={{ flex: 1 }} >
          <Text allowFontScaling={false} numberOfLines={3} ellipsizeMode="tail" style={applyStyle({ fontFamily: 'Arial', fontSize: 15, fontWeight: "600", color: "#4a4a4a", marginLeft: 10, marginRight: 10, flex: 1 })} >{item.name}</Text>
          {
            (!!item?.email)
            &&
            <Text allowFontScaling={false} style={[applyStyle({ marginTop: 3, fontFamily: 'Arial', fontSize: 13, color: "#c5c5c5", marginLeft: 10, marginRight: 10, flex: 1 })]} >{item?.email}</Text>
          }
          {
            item?.access_resetable == 1 &&
            <View style={{ flexDirection: 'row', marginLeft: 10, marginTop: 7 }}>
              <View style={{ borderWidth: 1, borderRadius: 10, paddingVertical: 2, borderColor: LibStyle.colorGreen, backgroundColor: LibStyle.colorGreen, padding: 10, }}>
                <Text allowFontScaling={false} style={{ color: '#fff' }}>{item?.access_resetable == 1 ? esp.lang("event/tms", "reset") : ""}</Text>
              </View>
            </View>
          }
        </View>
        {
          item?.url_delete != '' &&
          <TouchableOpacity onPress={() => {
            deleteTMS(item.url_delete, item?.name, index)
          }} >
            <View style={applyStyle({ padding: 7, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorRed })} >
              <LibIcon name='trash-can-outline' color={LibStyle.colorRed} size={16} />
            </View>
          </TouchableOpacity>
        }
      </TouchableOpacity>
    )
  }

  subs.useSubscribe(() => {
    ref?.current?.loadData?.()
  })

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <EventHeader title={esp.lang("event/tms", "header")} subtitle={dataEO?.name} />
      <LibInfinite
        ref={ref}
        // isDebug={1}
        url={'event_tms_list?event_id=' + dataEO?.id}
        errorView={(error: any) => (<EventMessage message={error} />)}
        renderItem={renderItem}
      />
      <Pressable onPress={() => { LibNavigation.navigate('event/tms_add', { dataEvent: dataEO }) }} style={{ ...LibStyle.elevation(2), position: 'absolute', bottom: 15, right: 15, height: 50, width: 50, borderRadius: 25, backgroundColor: LibStyle.colorGreen, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
        <LibIcon name='plus' color='#fff' size={26} />
      </Pressable>
    </View>
  )
}