// withHooks
// noPage

import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
import { EventCountdown_timestamp } from 'esoftplay/cache/event/countdown_timestamp/import';
import { EventFirebase_socket, EventFirebase_socketProperty } from 'esoftplay/cache/event/firebase_socket/import';
import { EventQueue_pricing, EventQueue_pricingProperty } from 'esoftplay/cache/event/queue_pricing/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { UseCondition } from 'esoftplay/cache/use/condition/import';
import esp from 'esoftplay/esp';
import useGlobalState from 'esoftplay/global';
import { useEffect, useRef } from 'react';

import React from 'react';
import { View } from 'react-native';


export interface EventQueueArgs {

}
export interface EventQueueProps {
  event_id: number,
  children: any,
  allotment?: any,
  onDoneQueue?: () => void
}

export interface EventQueueCountdownProps {
  onExpired?: () => void
}

const valueState = useGlobalState<number>(0)

export function QueueCountdown(props: EventQueueCountdownProps) {
  const [timer] = EventCountdownProperty.countdownTime.useState()
  const [value] = valueState.useState()

  if (value != 1) {
    return null
  }

  return (
    <View style={{ backgroundColor: LibStyle.colorGreen, margin: 16, borderRadius: 5, padding: 10, ...LibStyle.elevation(2) }} >
      <LibTextstyle text={esp.lang("event/ticket_list", "select_ticket")} textStyle='caption1' style={{ color: 'white' }} />
      <EventCountdown_timestamp
        onExpired={() => {
          props?.onExpired?.()
        }}
        expiredTimestamp={timer}
        style={{ color: "#fff", fontWeight: 'bold' }} />
    </View>
  )
}

export default function m(props: EventQueueProps): any {
  const checkCounter = useRef<number>(0)
  let refTimeout = useRef<any>(null)
  const { event_id, allotment } = props
  const { isInPricingQueueConfig, updateQueueExp } = EventFirebase_socket()
  const [value, setValue] = valueState.useState()

  useEffect(() => {
    EventFirebase_socketProperty.eventIdQueue.set(event_id)
    getCheckCounter()

    if (!!allotment) {
      EventFirebase_socketProperty.userIdKeyReplacer.set({
        t: Number(allotment.t),
        s: Number(allotment.s),
        priority: 1
      })
    }

    return () => {
      clearTimeout(refTimeout.current)
      valueState.reset()
      EventCountdownProperty.releaseQueue.trigger()
    }

  }, [])

  function getCheckCounter() {
    clearTimeout(refTimeout.current)
    const { pathQueue, event_id } = EventQueue_pricingProperty.state().get()
    if (event_id && isInPricingQueueConfig(event_id)) {
      updateQueueExp(pathQueue, event_id)
      checkCounter.current++
      refTimeout.current = setTimeout(() => {
        getCheckCounter()
      }, 6000);
    }
  }

  return (
    <View style={{ flex: 1 }}>
      <UseCondition if={isInPricingQueueConfig(String(event_id)) && value == 0} fallback={
        props?.children && props?.children
      }>
        <EventQueue_pricing event_id={event_id} onDone={(v) => {
          setValue(v)
          if (!!v) {
            const expTimestamp = Date.now() + (Number(esp.modProp("event/firebase_socket").eventQueueConfig.get(String(event_id)).time) * 1000);
            EventCountdownProperty.countdownTime.set(expTimestamp)
          }
          props?.onDoneQueue?.()
        }} />
      </UseCondition>
    </View>
  )
}