import { StyleSheet } from "react-native";
import { memo, useMemo } from "react";
import { XStack } from "tamagui";

//自定义组件
import CustomText from "@/components/common/CustomText";

// 引入国际化
import { useTranslation } from "@/node_modules/react-i18next";

// 引入屏幕适配工具
import { wp, sp } from "@/utils/ui/screenUtils";

const AttendanceStatics = (props) => {
  // 国际化
  const { t } = useTranslation("attendance");
  //获取打卡记录
  const { records } = props;

  // 可计算的打卡类型
  const COUNTABLE_ACTION_TYPES = useMemo(
    () =>
      new Set([
        "common",
        "late",
        "before",
        "outWork",
        "outWorkLate",
        "outWorkBefore",
      ]),
    []
  );

  // 计算打卡次数
  const clockCount = useMemo(() => {
    if (!Array.isArray(records) || records.length === 0) return 0;
    return records.reduce((count, record) => {
      return COUNTABLE_ACTION_TYPES.has(record?.actionType) ? count + 1 : count;
    }, 0);
  }, [records, COUNTABLE_ACTION_TYPES]);

  return (
    <XStack style={styles.container}>
      <CustomText style={styles.text}>
        {t("clockCount", { clockCount })}
      </CustomText>
    </XStack>
  );
};

export default memo(AttendanceStatics);

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
    marginTop: wp(10),
  },
  text: {
    fontSize: sp(12),
    color: "#191919",
  },
});
