// withHooks
import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
import { EventTms_logProperty } from 'esoftplay/cache/event/tms_log/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import { useTimeout } from 'esoftplay/timeout';
import React, { useEffect } from 'react';
import { Pressable, Text, View } from 'react-native';

export interface EventTms_in_logArgs {

}
export interface EventTms_in_logProps {
  onPress: (type: string, title: string) => void
}

export interface EntranceLogItem {
  text: string
  subtitle: string
  value: string
  onPress: () => void
  valuecolor?: string
}

function Item(props: EntranceLogItem) {
  return (
    <Pressable
      onPress={() => {
        props.onPress()
      }} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', marginHorizontal: 15, paddingVertical: 6, borderBottomWidth: 1, borderBottomColor: LibStyle.colorLightGrey }}>
      <View>
        <LibTextstyle text={props.text} textStyle="subhead" />
        <Text style={{ letterSpacing: 0.5, marginTop: 3, fontSize: 12, color: LibStyle.colorBrown }}>{props.subtitle}</Text>
      </View>
      <LibTextstyle text={LibUtils.number(props.value)} style={{ color: props.valuecolor ? props.valuecolor : "#000" }} textStyle="title2" />
    </Pressable>
  )
}

export default function m(props: EventTms_in_logProps): any {
  const log = EventTms_homeProperty.counterState().useSelector(s => s)
  // const backup = EventTms_in_successProperty.syncUsedTiket().useSelector(s => s)
  const [loading, setLoading] = useSafeState<boolean>(true)
  const timeout = useTimeout()

  esp.log({ log });

  function syncData() {
    // EventTms_homeProperty.subscribeSync().trigger(EventTms_in_successProperty.syncUsedTiket().get())
    timeout(() => {
      setLoading(false)
    }, 1000)
  }

  function forceSyncData() {
    // EventTms_homeProperty.subscribeSyncReset().trigger(EventTms_in_successProperty.syncUsedTiket().get())
    timeout(() => {
      setLoading(false)
    }, 1000)
  }

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

  if (loading) {
    return <LibLoading />
  }

  const sumValue = EventTms_logProperty.sumValuesPerCategory(log)

  return (
    <View style={{ flex: 1, backgroundColor: '#fff', margin: 17, marginTop: 0, paddingBottom: 10, marginBottom: 0, borderBottomRightRadius: 10, borderBottomLeftRadius: 10, ...LibStyle.elevation(2) }}>
      <Item text='Scan' subtitle={esp.lang("event/tms_in_log", "ticket_scanned")} value={sumValue?.entrance_scan} onPress={() => {
        if (sumValue?.entrance_scan) {
          props.onPress("entrance_scan", esp.lang("event/tms_in_log", "scan_gate"))
        }

      }} />
      <Item text={esp.lang("event/tms_in_log", "qty_ticket_scan")} subtitle={esp.lang("event/tms_in_log", "qty_ticket_scanned")} value={sumValue?.entrance_ticket} onPress={() => {
        if (sumValue?.entrance_ticket) {
          props.onPress("entrance_ticket", esp.lang("event/tms_in_log", "qty_ticket_scan"))
        }

      }} />
      <Item text={esp.lang("event/tms_in_log", "open_gate")} subtitle={esp.lang("event/tms_in_log", "ticket_scanned_id")} value={sumValue?.entrance_opengate} onPress={() => {
        if (sumValue?.entrance_opengate) {
          props.onPress("entrance_opengate", esp.lang("event/tms_in_log", "open_gate"))
        }
      }} />
      <Item text={esp.lang("event/tms_in_log", "opengate_idcard")} subtitle={esp.lang("event/tms_in_log", "idcard_scanned_in")} value={sumValue?.entrance_opengate_idcard} onPress={() => {
        if (sumValue?.entrance_opengate_idcard) {
          props.onPress("entrance_opengate_idcard", esp.lang("event/tms_in_log", "opengate_idcard"))
        }
      }} />
      <Item text={esp.lang("event/tms_in_log", "data_send")} subtitle={esp.lang("event/tms_in_log", "data_send_to_server")} value={sumValue?.entrance_send} onPress={() => {
        if (sumValue?.entrance_send) {
          props.onPress("entrance_send", esp.lang("event/tms_in_log", "data_send"))
        }

      }} />
      <Item text={esp.lang("event/tms_in_log", "data_not_send")} subtitle={esp.lang("event/tms_in_log", "data_not_send_to_server")} value={"0"} valuecolor={LibStyle.colorRed} onPress={() => {

      }} />

      {/* <View style={{ marginHorizontal: 15 }} > */}
        {/* <UseCondition
          if={backup.length == 0}
          fallback={
            <Pressable onPress={() => {

              setLoading(true)
              forceSyncData()
            }}>
              <Text allowFontScaling={false} style={{ textAlign: 'center' }}>{esp.lang("event/tms_in_log", "please_wait")}<Text style={{ color: LibStyle.colorBlue, textDecorationStyle: 'solid', textDecorationLine: 'underline' }}>{esp.lang("event/tms_in_log", "press_here")}</Text> {esp.lang("event/tms_in_log", "press_here2")}</Text>
            </Pressable>
          } >
          <LibTextstyle textStyle='callout'
            style={{ textAlign: 'center', marginTop: 10 }}
            text={esp.lang("event/tms_in_log", "all_data_send")} />
        </UseCondition> */}
      {/* </View> */}
    </View>
  )
}