// NumericStepper.tsx
import React, { useMemo } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  StyleProp,
  ViewStyle,
  TextStyle,
} from "react-native";
import { ThemeType, useTheme } from "../../theme";

export interface NumericStepperProps {
  value: number;
  minValue?: number;
  maxValue?: number;
  step?: number;
  onIncrement: () => void;
  onDecrement: () => void;
  isRTL?: boolean;
  style?: StyleProp<ViewStyle>;
  buttonStyle?: StyleProp<ViewStyle>;
  buttonTextStyle?: StyleProp<TextStyle>;
  valueTextStyle?: StyleProp<TextStyle>; 
  disabledOpacity?: number;
}

const NumericStepper: React.FC<NumericStepperProps> = ({
  value,
  minValue = 0,
  maxValue = Number.MAX_SAFE_INTEGER,
  onIncrement,
  onDecrement,
  isRTL: isRTLProp,
  style,
  buttonStyle,
  buttonTextStyle,
  valueTextStyle,
  disabledOpacity = 0.5,
}) => {
  const { theme, isRTL: themeRTL } = useTheme();
  const isRTL = isRTLProp ?? themeRTL;

  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);

  const isDecrementDisabled = value <= minValue;
  const isIncrementDisabled = value >= maxValue;

  return (
    <View style={[styles.container, style]}>
      <TouchableOpacity
        style={[
          styles.button,
          buttonStyle,
          isDecrementDisabled && { opacity: disabledOpacity },
        ]}
        onPress={onDecrement}
        disabled={isDecrementDisabled}
        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
      >
        <Text style={[styles.buttonText, buttonTextStyle]}>
          -
        </Text>
      </TouchableOpacity>

      <Text style={[styles.valueText, valueTextStyle]}>
        {value}
      </Text>

      <TouchableOpacity
        style={[
          styles.button,
          buttonStyle,
          isIncrementDisabled && { opacity: disabledOpacity },
        ]}
        onPress={onIncrement}
        disabled={isIncrementDisabled}
        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
      >
        <Text style={[styles.buttonText, buttonTextStyle]}>
          +
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const themedStyles = (theme: ThemeType, isRTL: boolean) =>
  StyleSheet.create({
    container: {
      flexDirection: isRTL ? "row-reverse" : "row",
      alignItems: "center",
    },
    button: {
      backgroundColor: theme.secondary,
      width: 36,
      height: 36,
      borderRadius: 18,
      justifyContent: "center",
      alignItems: "center",
    },
    buttonText: {
    //   fontSize: 20,
      fontWeight: "bold",
      color: theme.onSecondary
    },
    valueText: {
      fontSize: 16,
      minWidth: 50,
      textAlign: "center",
      marginHorizontal: 8,
      color: theme.onSurface
    },
  });

export default NumericStepper;