import { Stack } from 'expo-router';
import * as React from 'react';
import { View } from 'react-native';
import Animated, {
  FadeInUp,
  FadeOutDown,
  LayoutAnimationConfig,
  ZoomInEasyUp,
  ZoomOutEasyDown,
} from 'react-native-reanimated';

import { Text } from '~/components/nativewindui/Text';
import { Stepper } from '~/components/nativewindui/Stepper';

export default function StepperScreen() {
  const [count, setCount] = React.useState(0);
  function subtract() {
    setCount((prev) => (prev > 0 ? prev - 1 : 0));
  }
  function add() {
    setCount((prev) => prev + 1);
  }
  return (
    <>
      <Stack.Screen options={{ title: 'Stepper' }} />
      <View className="flex-1 items-center justify-center p-8">
        <View className="w-full flex-row items-center justify-between">
          <View className="flex-row items-center gap-1">
            <Text>Stepper: </Text>
            <FlipCounter count={count} />
          </View>
          <Stepper
            subtractButton={{ disabled: count === 0, onPress: subtract }}
            addButton={{ onPress: add }}
          />
        </View>
      </View>
    </>
  );
}

function FlipCounter({ count }: { count: number }) {
  const id = React.useId();
  return (
    <View className="overflow-hidden py-1">
      <LayoutAnimationConfig skipEntering>
        <Animated.View
          entering={FadeInUp.duration(120)}
          exiting={FadeOutDown.duration(120)}
          key={`${id}-wrapper-${count}`}>
          <Animated.View
            key={`${id}-inner-${count}`}
            entering={ZoomInEasyUp.duration(120)}
            exiting={ZoomOutEasyDown.duration(120)}>
            <Text className="text-primary font-medium">{count}</Text>
          </Animated.View>
        </Animated.View>
      </LayoutAnimationConfig>
    </View>
  );
}