import React, { useRef } from 'react';
import { Animated, StyleSheet, Platform } from 'react-native';
import { Column, Pressable, Text, useTheme } from 'native-base';

interface LinkBaseProps {
	text: string;
	onPress: () => void;
}

const LinkBase: React.FC<LinkBaseProps> = ({ text, onPress }) => {
	const underlineHeight = useRef(new Animated.Value(4)).current;
	const opacity = useRef(new Animated.Value(1)).current;
	const theme = useTheme();

	const handleMouseEnter = () => {
		if (Platform.OS === 'web') {
			Animated.timing(underlineHeight, {
				toValue: 20,
				duration: 250,
				useNativeDriver: false,
			}).start();
		}
	};

	const handleMouseLeave = () => {
		if (Platform.OS === 'web') {
			Animated.timing(underlineHeight, {
				toValue: 4,
				duration: 250,
				useNativeDriver: false,
			}).start();
		}
	};

	const handlePressIn = () => {
		Animated.timing(opacity, {
			toValue: 0.8,
			duration: 250,
			useNativeDriver: false,
		}).start();
	};

	const handlePressOut = () => {
		Animated.timing(opacity, {
			toValue: 1,
			duration: 250,
			useNativeDriver: false,
		}).start();
	};

	return (
		<Pressable
			style={styles.container}
			onPress={onPress}
			onPressIn={handlePressIn}
			onPressOut={handlePressOut}
			onHoverIn={handleMouseEnter}
			onHoverOut={handleMouseLeave}
		>
			<Column>
				<Text>{text}</Text>
				<Animated.View
					style={[
						styles.underline,
						{
							backgroundColor: theme.colors.primary[300],
							height: underlineHeight,
							opacity: opacity,
						},
					]}
				/>
			</Column>
		</Pressable>
	);
};

const styles = StyleSheet.create({
	container: {
		position: 'relative',
	},
	underline: {
		width: '100%',
		position: 'absolute',
		zIndex: -1,
		bottom: 0,
	},
});

export default LinkBase;
