sgw-owner-app/components/map/ShipInfo.tsx

import { STATUS_DANGEROUS, STATUS_NORMAL, STATUS_WARNING } from "@/constants";
import { useAppTheme } from "@/hooks/use-app-theme";
import { useI18n } from "@/hooks/use-i18n";
import { formatRelativeTime } from "@/services/time_service";
import { convertToDMS, kmhToKnot } from "@/utils/geom";
import { Ionicons } from "@expo/vector-icons";
import { ScrollView, Text, View } from "react-native";
import { ThemedText } from "../themed-text";

interface ShipInfoProps {
  thingMetadata?: Model.ThingMetadata;
}

const ShipInfo = ({ thingMetadata }: ShipInfoProps) => {
  const { t } = useI18n();
  const { colors } = useAppTheme();
  // Định nghĩa màu sắc theo trạng thái
  const statusConfig = {
    normal: {
      dotColor: "bg-green-500",
      badgeColor: "bg-green-100",
      badgeTextColor: "text-green-700",
      badgeText: "Bình thường",
    },
    warning: {
      dotColor: "bg-yellow-500",
      badgeColor: "bg-yellow-100",
      badgeTextColor: "text-yellow-700",
      badgeText: "Cảnh báo",
    },
    danger: {
      dotColor: "bg-red-500",
      badgeColor: "bg-red-100",
      badgeTextColor: "text-red-700",
      badgeText: "Nguy hiểm",
    },
  };
  const getThingStatus = () => {
    switch (thingMetadata?.state_level) {
      case STATUS_NORMAL:
        return "normal";
      case STATUS_WARNING:
        return "warning";
      case STATUS_DANGEROUS:
        return "danger";
      default:
        return "normal";
    }
  };

  const gpsData: Model.GPSResponse = JSON.parse(thingMetadata?.gps || "{}");

  const currentStatus = statusConfig[getThingStatus()];

  // Format tọa độ
  const formatCoordinate = (lat: number, lon: number) => {
    const latDir = lat >= 0 ? "N" : "S";
    const lonDir = lon >= 0 ? "E" : "W";
    return `${Math.abs(lat).toFixed(4)}°${latDir}, ${Math.abs(lon).toFixed(
      4
    )}°${lonDir}`;
  };

  return (
    <View className="px-4 py-3">
      {/* Header: Tên tàu và trạng thái */}
      <View className="flex-row items-center justify-between mb-3">
        <View className="flex-row items-center gap-2">
          {/* Status dot */}
          <View className={`h-3 w-3 rounded-full ${currentStatus.dotColor}`} />

          {/* Tên tàu */}
          <Text className="text-lg font-semibold text-gray-900">
            {thingMetadata?.ship_name}
          </Text>
        </View>

        {/* Badge trạng thái */}
        <View className={`px-3 py-1 rounded-full ${currentStatus.badgeColor}`}>
          <Text
            className={`text-md font-medium ${currentStatus.badgeTextColor}`}
          >
            {currentStatus.badgeText}
          </Text>
        </View>
      </View>

      {/* Mã tàu */}
      {/* <Text className="text-base text-gray-600 mb-2">{shipCode}</Text> */}
      <View className="flex-row items-center justify-between gap-2 mb-3">
        <View className="flex-row items-center gap-2 w-2/3">
          <Ionicons name="speedometer-outline" size={16} color="#6B7280" />
          <Text className="text-md text-gray-600">
            {kmhToKnot(gpsData.s || 0)} {t("home.speed_units")}
          </Text>
        </View>
        <View className="flex-row items-start gap-2 w-1/3 ">
          <Ionicons name="compass-outline" size={16} color="#6B7280" />
          <Text className="text-md text-gray-600">{gpsData.h}°</Text>
        </View>
      </View>
      {/* Tọa độ */}
      <View className="flex-row items-center justify-between gap-2 mb-2">
        <View className="flex-row items-center gap-2 w-2/3">
          <Ionicons name="location-outline" size={16} color="#6B7280" />
          <Text className="text-md text-gray-600">
            {convertToDMS(gpsData.lat || 0, true)},
            {convertToDMS(gpsData.lon || 0, false)}
          </Text>
        </View>
        <View className=" flex-row items-start gap-2 w-1/3 ">
          <Ionicons name="time-outline" size={16} color="#6B7280" />
          <Text className="text-md text-gray-600">
            {formatRelativeTime(gpsData.t)}
          </Text>
        </View>
      </View>
      {/* <View className="flex">
        <Description title="Trạng thái" description={thingMetadata?.state} />
      </View> */}
      {thingMetadata?.state !== "" && (
        <View className="flex-row items-center gap-2">
          <ThemedText style={{ color: colors.textSecondary, fontSize: 15 }}>
            Trạng thái:
          </ThemedText>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            style={{ flex: 1 }}
          >
            <ThemedText style={{ color: colors.text, fontSize: 15 }}>
              {thingMetadata?.state || "-"}
            </ThemedText>
          </ScrollView>
        </View>
      )}
    </View>
  );
};

export default ShipInfo;