import {useEffect} from 'react';
import {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import {INPUT_SPACING} from '@components/constants';

const COMMON_ANIMATION_OPTIONS = {duration: 100};

export const useAnimatedInput = (elevateLabel?: boolean) => {
  const labelSize = useSharedValue(INPUT_SPACING.fontSize);
  const labelPosition = useSharedValue(INPUT_SPACING.animatedLabelPosition);
  const inputPosition = useSharedValue(0);

  useEffect(() => {
    labelSize.value = withTiming(
      elevateLabel ? INPUT_SPACING.materialLabelSize : INPUT_SPACING.fontSize,
      COMMON_ANIMATION_OPTIONS,
    );
    labelPosition.value = withTiming(
      elevateLabel
        ? INPUT_SPACING.elevatedLabelPosition
        : INPUT_SPACING.animatedLabelPosition,
      COMMON_ANIMATION_OPTIONS,
    );
    inputPosition.value = withTiming(
      elevateLabel ? INPUT_SPACING.animatedLabelPosition : 0,
      COMMON_ANIMATION_OPTIONS,
    );
  }, [elevateLabel, inputPosition, labelPosition, labelSize]);

  const animatedLabelStyle = useAnimatedStyle(() => ({
    fontSize: labelSize.value,
    top: labelPosition.value,
  }));

  const animatedInputStyle = useAnimatedStyle(() => ({
    marginTop: inputPosition.value,
  }));

  return {animatedLabelStyle, animatedInputStyle};
};
