digital-pilates/components/statistic/OxygenSaturationCard.tsx

import { ensureHealthPermissions, fetchOxygenSaturation } from '@/utils/health';
import { HealthKitUtils } from '@/utils/healthKit';
import { useIsFocused } from '@react-navigation/native';
import dayjs from 'dayjs';
import React, { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import HealthDataCard from './HealthDataCard';

interface OxygenSaturationCardProps {
  style?: object;
  selectedDate?: Date;
}

const OxygenSaturationCard: React.FC<OxygenSaturationCardProps> = ({
  style,
  selectedDate
}) => {
  const { t } = useTranslation();
  const isFocused = useIsFocused();
  const [oxygenSaturation, setOxygenSaturation] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const loadingRef = useRef(false);

  useEffect(() => {
    const loadOxygenSaturationData = async () => {
      const dateToUse = selectedDate || new Date();

      if (!isFocused) return;
      if (!HealthKitUtils.isAvailable()) {
        setOxygenSaturation(null);
        return;
      }

      // 防止重复请求
      if (loadingRef.current) return;

      try {
        loadingRef.current = true;
        setLoading(true);

        const hasPermission = await ensureHealthPermissions();
        if (!hasPermission) {
          setOxygenSaturation(null);
          return;
        }

        const options = {
          startDate: dayjs(dateToUse).startOf('day').toDate().toISOString(),
          endDate: dayjs(dateToUse).endOf('day').toDate().toISOString()
        };

        const data = await fetchOxygenSaturation(options);
        setOxygenSaturation(data);
      } catch (error) {
        console.error('OxygenSaturationCard: Failed to get blood oxygen data:', error);
        setOxygenSaturation(null);
      } finally {
        setLoading(false);
        loadingRef.current = false;
      }
    };

    loadOxygenSaturationData();
  }, [isFocused, selectedDate]);

  return (
    <HealthDataCard
      title={t('statistics.components.oxygen.title')}
      value={loading ? '--' : (oxygenSaturation !== null && oxygenSaturation !== undefined ? oxygenSaturation.toFixed(1) : '--')}
      unit="%"
      style={style}
    />
  );
};

export default OxygenSaturationCard;