frontPanel/src/pages/createQuize/AvailablePrivilege.tsx

import { Box, Typography } from "@mui/material";
import {
  clearUserData,
  OriginalUserAccount,
  setUserAccount,
  useUserStore,
} from "@root/user";
import { clearAuthToken, getMessageFromFetchError } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";
import { useUserAccountFetcher } from "@utils/hooks/useUserAccountFetcher";
import { useNavigate } from "react-router-dom";
import moment from "moment";

export default function AvailablePrivilege() {
  const user = useUserStore();
  const userPrivileges = user.userAccount?.privileges;
  const userId = useUserStore((state) => state.userId);
  const navigate = useNavigate();
  useUserAccountFetcher<OriginalUserAccount>({
    url: `${process.env.REACT_APP_DOMAIN}/squiz/account/get`,
    userId,
    onNewUserAccount: setUserAccount,
    onError: (error) => {
      const errorMessage = getMessageFromFetchError(error);
      if (errorMessage) {
        enqueueSnackbar(errorMessage);
        clearUserData();
        clearAuthToken();
        navigate("/signin");
      }
    },
  });
  const DayForm = ["день", "дня", "дней"];
  function declOfNum(n: number, text_forms: string[]) {
    n = Math.abs(n) % 100;
    var n1 = n % 10;
    if (n > 10 && n < 20) {
      return text_forms[2];
    }
    if (n1 > 1 && n1 < 5) {
      return text_forms[1];
    }
    if (n1 == 1) {
      return text_forms[0];
    }
    return text_forms[2];
  }
  const quizUnlimTime = userPrivileges?.quizUnlimTime?.amount || 0;
  const quizCnt = userPrivileges?.quizCnt?.amount || 0;
  const squizHideBadge = userPrivileges?.squizHideBadge?.amount || 0;

  //Где дни - amount - это на сколько дней выдан безлимит. т.е. не сколько осталось, а на сколько дней выдано
  function getCramps(amount: number, created_at: string) {
    if (created_at.length === 0) return 0;
    const currentDate = moment();

    return Number(
      (
        moment(
          moment(created_at).add(amount, "days").diff(currentDate),
        ).unix() / 86400
      ).toFixed(1),
    );
  }
  const quizUnlimDays = getCramps(
    quizUnlimTime,
    userPrivileges?.quizUnlimTime?.created_at || "",
  );
  const squizBadgeDays = getCramps(
    squizHideBadge,
    userPrivileges?.squizHideBadge?.created_at || "",
  );

  const currentDate = moment();
  console.log(quizUnlimDays);
  console.log(moment());
  console.log(
    moment(
      moment(userPrivileges?.quizUnlimTime?.created_at).add(
        quizUnlimTime,
        "days",
      ),
    ),
  );

  return (
    <Box
      sx={{
        padding: "20px",
        backgroundColor: "#9A9AAF17",
        width: "100%",
        borderRadius: "12px",
        display: "flex",
        gap: "20px",
        flexWrap: "wrap",
      }}
    >
      <Typography variant={"body1"} sx={{ color: "#9A9AAF" }}>
        Вам доступно:
      </Typography>
      <Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
        Безлимитные заявки:{" "}
        <strong>
          {quizUnlimDays > 0 && quizUnlimDays < 1
            ? "последний день"
            : `${Math.trunc(quizUnlimDays)} ${declOfNum(Math.trunc(quizUnlimDays), DayForm)}`}
        </strong>
      </Typography>
      {quizCnt !== 0 && (
        <Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
          Заявки: <strong>{quizCnt} шт.</strong>
        </Typography>
      )}
      {squizHideBadge !== 0 && (
        <Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
          Скрытие логотипа PenaQuiz:{" "}
          <strong>
            {squizBadgeDays > 0 && squizBadgeDays < 1
              ? "последний день"
              : `${Math.trunc(squizBadgeDays)} ${declOfNum(Math.trunc(squizBadgeDays), DayForm)}`}
          </strong>
        </Typography>
      )}
    </Box>
  );
}