// withHooks

import { EventCountdown_timestamp } from 'esoftplay/cache/event/countdown_timestamp/import';
import { EventFirebase_socket } from 'esoftplay/cache/event/firebase_socket/import';
import { EventQueue_pricingProperty } from 'esoftplay/cache/event/queue_pricing/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { UserRoutes } from 'esoftplay/cache/user/routes/import';
import useGlobalState from 'esoftplay/global';
import useGlobalSubscriber from 'esoftplay/subscribe';
import React, { useEffect } from 'react';
import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';

export interface EventCountdownArgs {

}

export interface EventCountdownProps {

}
export const countdownTime = useGlobalState<any>('0')

export const releaseQueue = useGlobalSubscriber()

export const eventURI = useGlobalState<string>('')

export default function m(props: EventCountdownProps): any {
  const [timer] = countdownTime.useState()
  const routes = UserRoutes.state().useSelector((x) => x?.routes)
  const { doneQueue, isInPricingQueueConfig } = EventFirebase_socket();

  const animatedValue = useSharedValue(0)

  releaseQueue.useSubscribe(() => {
    const { pathQueue, event_id, key } = EventQueue_pricingProperty.state().get()
    if (event_id && isInPricingQueueConfig(event_id)) {
      doneQueue(pathQueue, event_id, key, () => { })
      EventQueue_pricingProperty.state().reset()
      countdownTime.reset()
      eventURI.reset()
    }
  })

  useEffect(() => {
    animatedValue.value = withRepeat(withTiming(animatedValue.value == 0 ? 1 : 0.3, { duration: 1500 }), -1, true)
  }, [])

  const animated = useAnimatedStyle(() => ({
    opacity: animatedValue.value
  }))

  if (timer == '0')
    return null
  else if (routes?.[routes?.length - 1]?.name == 'event/ticket_list')
    return null
  else
    return (
      <Animated.View pointerEvents='none' style={[{ position: 'absolute', alignItems: 'center', justifyContent: 'center', top: LibStyle.STATUSBAR_HEIGHT + 61, padding: 1, backgroundColor: LibUtils.hexToRgba(LibStyle.colorGreen, 1), width: '100%' }, animated]} >
        <EventCountdown_timestamp
          onExpired={() => {
            const routeNames = UserRoutes.state()?.get()?.routes?.map?.((x: any) => x.name)
            if (routeNames.includes("event/artist")) {
              LibNavigation.navigate("event/artist", { url: eventURI.get() })
            } else if (routeNames.includes("event/detail")) {
              LibNavigation.navigate("event/detail", { url: eventURI.get() })
            }
            LibNavigation.backToRoot()
            countdownTime.reset()
            eventURI.reset()
          }}
          expiredTimestamp={timer}
          style={{ color: "#fff" }} />
      </Animated.View>
    )
}