import { View } from 'react-native';
import { useCounterDispatch, useCounterState } from '../stores/CounterStore';
import { styles } from '../src/theme';
import { Button, Card, Text } from 'react-native-paper';
import { HStack, VStack } from '../components/stack';
import { useBounce } from '../src/animation/useBounce';
import Animated from 'react-native-reanimated';

export default function TestPage() {
  const state = useCounterState();
  const dispatch = useCounterDispatch();

  const { style: bounceStyle, trigger: bounce } = useBounce({ amplitude: 16, duration: 200 });

  return (
    <View style={styles.flexCenter}>
      <Card mode="outlined" style={{ width: '80%' }}>
        <Card.Title title={`Count: ${state.count}`} />
        <Card.Content>
          <VStack gap={12}>
            <HStack justify="space-between">
              <Text variant="bodyMedium" style={{ color: '#0000FF' }}>
                Text1
              </Text>
              <Text variant="bodyMedium" style={{ color: '#FF0000' }}>
                Text2
              </Text>
            </HStack>
            <Animated.View style={bounceStyle}>
              <Button
                mode="outlined"
                onPress={() => {
                  bounce();
                }}>
                🍞Action!
              </Button>
            </Animated.View>
            <HStack justify="space-between">
              <Button mode="contained" onPress={() => dispatch({ type: 'INCREMENT' })}>
                +
              </Button>
              <Button mode="contained" onPress={() => dispatch({ type: 'DECREMENT' })}>
                -
              </Button>
            </HStack>
          </VStack>
        </Card.Content>
      </Card>
    </View>
  );
}