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

import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
import { EventTms_logProperty } from 'esoftplay/cache/event/tms_log/import';
import { EventTms_out_successProperty } from 'esoftplay/cache/event/tms_out_success/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 { UseCondition } from 'esoftplay/cache/use/condition/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import { useTimeout } from 'esoftplay/timeout';
import React from 'react';
import { Pressable, Text, View } from 'react-native';


export interface EventTms_out_logArgs {

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

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

function Item(props: ExitLogItem) {
  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={{ 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_out_logProps): any {

  const logExit = EventTms_homeProperty.counterState().useSelector(s => s)
  const backupExit = EventTms_out_successProperty.syncTicketExit().useSelector(s => s)
  const [loading, setLoading] = useSafeState<boolean>(true)
  const timeout = useTimeout()

  function syncExitData() {
    EventTms_homeProperty.subscribeSyncExit().trigger(EventTms_out_successProperty.syncTicketExit().get())
    timeout(() => {
      setLoading(false)
    }, 1000)
  }

  function forceSyncExitData() {
    EventTms_homeProperty.subscribeSyncExitReset().trigger(EventTms_out_successProperty.syncTicketExit().get())
    timeout(() => {
      setLoading(false)
    }, 1000)
  }

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


  if (loading) {
    return <LibLoading />
  }

  const sumValue = EventTms_logProperty.sumValuesPerCategory(logExit)

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

      }} />
      <Item subtitle={esp.lang("event/tms_out_log", "qty_scanned_out")} text={esp.lang("event/tms_out_log", "qty_ticket_scan_out")} value={sumValue?.out_ticket} onPress={() => {
        if (sumValue?.out_ticket) {
          props.onPress("out_ticket", esp.lang("event/tms_out_log", "qty_ticket_scan_out"))
        }

      }} />
      <Item subtitle={esp.lang("event/tms_out_log", "ticket_scanned_out")} text={esp.lang("event/tms_out_log", "opengate_out")} value={sumValue?.out_opengate} onPress={() => {
        if (sumValue?.out_opengate) {
          props.onPress("out_opengate", esp.lang("event/tms_out_log", "opengate_out"))
        }

      }} />
      <Item subtitle={esp.lang("event/tms_out_log", "data_send_to_server")} text={esp.lang("event/tms_out_log", "data_send")} value={sumValue?.out_send} onPress={() => {
        if (sumValue?.out_send) {
          props.onPress("out_send", esp.lang("event/tms_out_log", "data_send"))
        }

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

      }} />

      <View style={{ marginHorizontal: 15 }} >
        <UseCondition
          if={backupExit.length == 0}
          fallback={
            <Pressable onPress={() => {
              setLoading(true)
              forceSyncExitData()
            }}>
              <Text allowFontScaling={false} style={{ textAlign: 'center' }}>{esp.lang("event/tms_out_log", "waiting")}<Text style={{ color: LibStyle.colorBlue, textDecorationStyle: 'solid', textDecorationLine: 'underline' }}>{esp.lang("event/tms_out_log", "click")}</Text> {esp.lang("event/tms_out_log", "re_try")}</Text>
            </Pressable>
          } >
          <LibTextstyle textStyle='callout'
            style={{ textAlign: 'center', marginTop: 15 }}
            text={esp.lang("event/tms_out_log", "all_data_send")} />
        </UseCondition>
      </View>
    </View >
  )
}