// withHooks
// noPage

import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';
import React, { useEffect } from 'react';
import { StyleProp, Text, TextStyle, View, ViewStyle } from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';


export interface EventCountdown_eventArgs {

}
export interface EventCountdown_eventProps {
  date: string,
  timezone?: string,
  containerStyle?: StyleProp<ViewStyle>
  bulletStyle?: StyleProp<ViewStyle>,
  style?: StyleProp<TextStyle>
}
export default function m(props: EventCountdown_eventProps): any {
  const opacity = useSharedValue(1)

  useEffect(() => {
    opacity.value = withRepeat(
      withTiming(0.2, { duration: 500 }),
      -1,
      true
    )
  }, [])

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

  return (
    <View style={[{ flexDirection: 'row', alignItems: 'center' }, props?.containerStyle]}>
      <Animated.View style={[{ marginRight: 5, width: 8, height: 8, borderRadius: 5, backgroundColor: LibStyle.colorGreen }, animatedStyle, props?.bulletStyle]} />
      <Text allowFontScaling={false} style={[{ fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }, props?.style]}>{esp.lang("event/countdown_event", "ends")}</Text>
      <EventCountdown_base
        expired={props.date}
        showDayUnit
        hideTimeUnit
        timezone={props?.timezone}
        style={[{ fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }, props?.style]}
      />
    </View>
  )
}