import React from "react";
import { Text, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";

interface InfoSectionProps {
  fishingLog?: Model.FishingLog;
  stt?: number;
}

export const InfoSection: React.FC<InfoSectionProps> = ({
  fishingLog,
  stt,
}) => {
  if (!fishingLog) {
    return null;
  }
  const infoItems = [
    { label: "Số thứ tự", value: `Mẻ ${stt}` },
    {
      label: "Trạng thái",
      value: fishingLog.status === 1 ? "Đã hoàn thành" : "Chưa hoàn thành",
      isStatus: true,
    },
    {
      label: "Thời gian bắt đầu",
      value: fishingLog.start_at
        ? new Date(fishingLog.start_at).toLocaleString()
        : "Chưa cập nhật",
    },
    {
      label: "Thời gian kết thúc",
      value:
        fishingLog.end_at !== "0001-01-01T00:00:00Z"
          ? new Date(fishingLog.end_at).toLocaleString()
          : "-",
    },
    // {
    //   label: "Vị trí hạ thu",
    //   value: fishingLog.viTriHaThu || "Chưa cập nhật",
    // },
    // {
    //   label: "Vị trí thu lưới",
    //   value: fishingLog.viTriThuLuoi || "Chưa cập nhật",
    // },
    // {
    //   label: "Độ sâu hạ thu",
    //   value: fishingLog.doSauHaThu || "Chưa cập nhật",
    // },
    // {
    //   label: "Độ sâu thu lưới",
    //   value: fishingLog.doSauThuLuoi || "Chưa cập nhật",
    // },
  ];

  return (
    <View style={styles.infoCard}>
      {infoItems.map((item, index) => (
        <View key={index} style={styles.infoRow}>
          <Text style={styles.infoLabel}>{item.label}</Text>
          {item.isStatus ? (
            <View
              style={[
                styles.statusBadge,
                item.value === "Đã hoàn thành"
                  ? styles.statusBadgeCompleted
                  : styles.statusBadgeInProgress,
              ]}
            >
              <Text
                style={[
                  styles.statusBadgeText,
                  item.value === "Đã hoàn thành"
                    ? styles.statusBadgeTextCompleted
                    : styles.statusBadgeTextInProgress,
                ]}
              >
                {item.value}
              </Text>
            </View>
          ) : (
            <Text style={styles.infoValue}>{item.value}</Text>
          )}
        </View>
      ))}
    </View>
  );
};