/**
 * 更多功能面板组件
 */

import React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Text } from '../../../../components/common';
import { useChatScreenStyles } from './styles';
import { MORE_ACTIONS } from './constants';
import { MorePanelProps } from './types';

export const MorePanel: React.FC<MorePanelProps> = ({
  onAction,
  disabledActionIds = [],
}) => {
  const styles = useChatScreenStyles();
  const disabledSet = new Set(disabledActionIds);
  return (
    <View style={styles.panelContainer}>
      <View style={styles.moreGrid}>
        {MORE_ACTIONS.map((action) => {
          const disabled = disabledSet.has(action.id);
          return (
          <TouchableOpacity
            key={action.id}
            style={[styles.moreItem, disabled ? { opacity: 0.45 } : null]}
            onPress={() => onAction(action.id)}
            disabled={disabled}
          >
            <View style={styles.moreIconContainer}>
              <MaterialCommunityIcons name={action.icon as any} size={28} color={action.color} />
            </View>
            <Text style={styles.moreItemText}>{action.name}</Text>
          </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
};

export default MorePanel;