import React from 'react';
import { View, StyleSheet, Image, Pressable } from 'react-native';
import TextTicker from 'react-native-text-ticker';
import { wp, sp } from '@/utils/ui/screenUtils';
import { router } from 'expo-router';

const SCROLL_SPEED = 20;
const H_PADDING = wp(12);
const V_PADDING = wp(10);

const AnnouncementTicker = ({ title, top }) => {
  return (
    <View pointerEvents="box-none" style={[styles.floatWrap, { top }]}> 
      <Pressable
        pointerEvents="auto"
        onPress={() => router.push('/announcement')}
        style={({ pressed }) => [
          styles.tickerWrap,
          { transform: [{ scale: pressed ? 0.97 : 1 }] },
        ]}
      >
        <Image source={require('@/assets/images/icon/horn.png')} style={styles.leftIcon} />
        <View style={styles.textWindow}>
          <TextTicker
            scrolls={true}
            style={styles.tickerText}
            numberOfLines={1}
            allowFontScaling={false}
            animationType="scroll"
            bounce={false}
            loop
            scrollSpeed={SCROLL_SPEED}
            marqueeDelay={300}
            repeatSpacer={wp(24)}
            isRTL={false}
            useNativeDriver
          >
            {title}
          </TextTicker>
        </View>
        <Image source={require('@/assets/images/icon/right6113.png')} style={styles.rightIcon} />
      </Pressable>
    </View>
  );
};

export default React.memo(AnnouncementTicker);

const styles = StyleSheet.create({
  // 绝对定位容器
  floatWrap: {
    position: 'absolute',
    left: wp(12),
    right: wp(12),
    zIndex: 20,
  },
  tickerWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: H_PADDING,
    paddingVertical: V_PADDING,
    backgroundColor: '#FFF7E6',
    borderRadius: wp(10),
    borderColor: '#F5C97B',
    borderWidth: wp(1),
    // 加重阴影，凸显悬浮窗（iOS/Android）
    shadowColor: '#000',
    shadowOpacity: 0.15,
    shadowRadius: 10,
    shadowOffset: { width: 0, height: 4 },
    elevation: 6,
  },
  leftIcon: {
    width: wp(20.14),
    height: wp(16.35),
  },
  rightIcon: {
    width: wp(20),
    height: wp(20),
  },
  textWindow: {
    flex: 1,
    overflow: 'hidden',
    marginHorizontal: wp(8),
  },
  tickerText: {
    fontSize: sp(14),
    color: '#5C5C5C',
    flexShrink: 0,
  },
});