import { Space, Tag } from '@douyinfe/semi-ui';
import type { VehicleSourceStatus } from '../api/types';

function sourceStatusLabel(source: Pick<VehicleSourceStatus, 'online' | 'hasRealtime' | 'lastSeen'>) {
  if (source.online) {
    return { text: '在线', color: 'green' as const };
  }
  if (source.hasRealtime || source.lastSeen) {
    return { text: '离线', color: 'orange' as const };
  }
  return { text: '未接入', color: 'grey' as const };
}

export function SourceStatusTags({
  sourceStatus,
  protocols,
  lastSeen
}: {
  sourceStatus?: VehicleSourceStatus[];
  protocols?: string[];
  lastSeen: string;
}) {
  const sources = sourceStatus?.length
    ? sourceStatus
    : (protocols ?? []).map((protocol) => ({ protocol, online: false, hasRealtime: true, lastSeen }));

  return (
    <Space spacing={4} wrap>
      {sources.map((source) => {
        const status = sourceStatusLabel(source);
        return <Tag key={source.protocol} color={status.color}>{source.protocol} {status.text}</Tag>;
      })}
    </Space>
  );
}
