import React from 'react';
import { TouchableOpacity, StyleProp, ViewStyle, StyleSheet } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { useAppColors } from '../../theme';

type AppBackButtonIcon = 'chevron-left' | 'arrow-left' | 'close';

interface AppBackButtonProps {
  onPress: () => void;
  icon?: AppBackButtonIcon;
  style?: StyleProp<ViewStyle>;
  iconColor?: string;
  hitSlop?: number;
  testID?: string;
}

const AppBackButton: React.FC<AppBackButtonProps> = ({
  onPress,
  icon = 'chevron-left',
  style,
  iconColor: iconColorProp,
  hitSlop = 8,
  testID,
}) => {
  const colors = useAppColors();
  const iconColor = iconColorProp ?? colors.text.primary;

  return (
    <TouchableOpacity
      onPress={onPress}
      style={[styles.button, style]}
      activeOpacity={0.6}
      hitSlop={hitSlop}
      testID={testID}
      accessibilityRole="button"
      accessibilityLabel={icon === 'close' ? '关闭' : '返回'}
    >
      <MaterialCommunityIcons name={icon} size={36} color={iconColor} />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: -12,
    marginRight: 0,
    padding: 0,
    backgroundColor: 'transparent',
  },
});

export default AppBackButton;