import React from 'react';
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Text,
  ActivityIndicator,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

interface BottomActionBarProps {
  onRun: () => void;
  onSave: () => void;
  onUndo: () => void;
  onBack: () => void;
  isSaveDisabled?: boolean;
  isRunLoading?: boolean;
}

const BottomActionBar: React.FC<BottomActionBarProps> = ({
  onRun,
  onSave,
  onUndo,
  onBack,
  isSaveDisabled = true,
  isRunLoading = false,
}) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={onBack} style={styles.button}>
        <Icon name="arrow-left" size={24} color="#AAAAAA" />
        <Text style={styles.buttonText}>返回</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={onUndo} style={styles.button}>
        <Icon name="undo" size={24} color="#AAAAAA" />
        <Text style={styles.buttonText}>撤销</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={onSave}
        disabled={isSaveDisabled}
        style={[styles.button, isSaveDisabled && styles.disabledButton]}
      >
        <Icon
          name="content-save"
          size={24}
          color={isSaveDisabled ? '#555555' : '#00ff00'}
        />
        <Text
          style={[
            styles.buttonText,
            { color: isSaveDisabled ? '#555555' : '#00ff00' },
          ]}
        >
          保存
        </Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={onRun}
        disabled={isRunLoading}
        style={[
          styles.button,
          styles.runButton,
          isRunLoading && styles.disabledButton,
        ]}
      >
        {isRunLoading ? (
          <ActivityIndicator size="small" color="#FFFFFF" />
        ) : (
          <>
            <Icon name="play" size={24} color="#FFFFFF" />
            <Text style={[styles.buttonText, styles.runButtonText]}>运行</Text>
          </>
        )}
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 12,
    paddingHorizontal: 10,
    backgroundColor: 'rgba(26, 26, 26, 0.9)',
    borderTopWidth: 1,
    borderTopColor: '#333333',
  },
  button: {
    alignItems: 'center',
  },
  buttonText: {
    color: '#AAAAAA',
    fontSize: 12,
    marginTop: 4,
  },
  runButton: {
    backgroundColor: '#007BFF',
    paddingHorizontal: 20,
    paddingVertical: 8,
    borderRadius: 20,
  },
  runButtonText: {
    color: '#FFFFFF',
  },
  disabledButton: {
    opacity: 0.5,
  },
});

export default BottomActionBar;
