import React, { useState, useEffect, useMemo, memo } from 'react';
import { View } from 'tamagui';
import CustomText from '@/components/common/CustomText.jsx';
import { wp } from '@/utils/ui/screenUtils';
import dayjs from 'dayjs';

/**
 * 共享的打卡状态显示组件
 * 显示当前时间和打卡状态信息
 * @param {Object} record - 打卡记录数据
 * @param {Object} style - 自定义样式
 */
const ClockInStatus = ({ record, style = {} }) => {
  const [currentTime, setCurrentTime] = useState(dayjs().format('HH:mm:ss'));

  // 实时更新时间
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(dayjs().format('HH:mm:ss'));
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  // 时间显示逻辑
  const timeDisplay = useMemo(() => {
    if (!record?.isClockCard && record?.clockActionType !== '') {
      return record?.actionTime?.split(' ')?.[1] || currentTime;
    }
    if (record?.isClockCard) {
      if (record?.onOff === 'off' && record?.actionTime !== '') {
        return currentTime;
      } else {
        return currentTime;
      }
    }
    return currentTime;
  }, [record, currentTime]);

  return (
    <View 
      style={[
        {
          backgroundColor: '#f5f5f5',
          borderRadius: wp(8),
          paddingHorizontal: wp(12),
          paddingVertical: wp(15),
          borderWidth: 1,
          borderColor: '#e0e0e0',
        },
        style
      ]}
    >
      <CustomText
        style={{
          fontSize: wp(16),
          color: '#333',
          fontFamily: 'Bold',
        }}
      >
        {timeDisplay}
      </CustomText>
    </View>
  );
};

export default memo(ClockInStatus);