import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useAppTheme } from '@theme';
import { getStyles } from './numericKeypad.styles';

interface NumericKeypadProps {
  onPress: (digit: string) => void;
  onBackspace: () => void;
  disabled?: boolean;
}

export const NumericKeypad: React.FC<NumericKeypadProps> = ({
  onPress,
  onBackspace,
  disabled = false,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const keys = [
    ['1', '2', '3'],
    ['4', '5', '6'],
    ['7', '8', '9'],
    ['', '0', '⌫'],
  ];

  const handlePress = (val: string) => {
    if (disabled) return;
    if (val === '⌫') {
      onBackspace();
    } else if (val !== '') {
      onPress(val);
    }
  };

  return (
    <View style={styles.container}>
      {keys.map((row, rIndex) => (
        <View key={rIndex} style={styles.row}>
          {row.map((val, cIndex) => {
            if (val === '') {
              return <View key={cIndex} style={styles.emptyKey} />;
            }

            return (
              <TouchableOpacity
                key={cIndex}
                style={styles.keyButton}
                activeOpacity={0.7}
                onPress={() => handlePress(val)}
                disabled={disabled}
              >
                <Text style={styles.keyText}>{val}</Text>
              </TouchableOpacity>
            );
          })}
        </View>
      ))}
    </View>
  );
};
export default NumericKeypad;