import React from 'react';
import { StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import { Card, Chip } from '@rneui/themed';
import { Task } from '../types/task';

interface TaskCardProps {
  task: Task;
  onPress: (id: string) => void;
}

const statusMap: { [key: number]: { text: string; color: string } } = {
  0: { text: 'IDLE', color: 'grey' },
  1: { text: 'RUNNING', color: 'blue' },
  2: { text: 'COMPLETED', color: 'green' },
  3: { text: 'ERROR', color: 'red' },
};

const { width } = Dimensions.get('window');
const cardWidth = (width - 32) / 2; // 减去padding，除以2得到每个卡片的宽度

const TaskCard: React.FC<TaskCardProps> = ({ task, onPress }) => {
  const statusInfo = statusMap[task.status] || statusMap[0];
  return (
    <TouchableOpacity onPress={() => onPress(task.id)} style={styles.touchable}>
      <Card containerStyle={styles.card}>
        <Card.Title style={styles.title}>{task.label}</Card.Title>
        <Card.Divider />
        <Chip
          title={statusInfo.text}
          icon={{
            name: 'information',
            type: 'material-community',
            size: 20,
            color: statusInfo.color,
          }}
          type="outline"
          containerStyle={styles.chip}
          titleStyle={[styles.chipTitle, { color: statusInfo.color }]}
          buttonStyle={{ borderColor: statusInfo.color }}
        />
      </Card>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  touchable: {
    width: cardWidth,
    marginBottom: 8,
  },
  card: {
    margin: 4,
    borderRadius: 8,
    width: cardWidth - 8, // 减去margin
  },
  title: {
    marginBottom: 12,
    minHeight: 50, // Ensure cards have similar height
    textAlign: 'left',
  },
  chip: {
    alignSelf: 'flex-start',
  },
  chipTitle: {
    fontSize: 12,
  },
});

export default TaskCard;
