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

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

const statusColors: Record<TaskStatus, string> = {
  IDLE: 'grey',
  RUNNING: 'blue',
  COMPLETED: 'green',
  ERROR: 'red',
};

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

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