adminFront/src/pages/dashboard/ModalUser/VerificationTab.tsx

import { useState, useEffect } from "react";
import { Box, Typography, TextField, Button } from "@mui/material";
import { verification, patchVerification } from "@root/api/verification";
import { enqueueSnackbar } from "notistack";
import { useDebouncedCallback } from "use-debounce";

import type { ChangeEvent } from "react";
import type { Verification } from "@root/api/verification";

type VerificationTabProps = {
  userId: string;
};

export const VerificationTab = ({ userId }: VerificationTabProps) => {
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [verificationInfo, setVerificationInfo] = useState<Verification | null>(null);
  const [comment, setComment] = useState<string>("");
  const [INN, setINN] = useState<string>("");

  const requestVefification = async () => {
    setIsLoading(true);

    const [verificationResponse, verificationError] = await verification(
      userId
    );

    setIsLoading(false);

    if (verificationError) {
      return console.error("Error verifying:", verificationError);
    }

    if (verificationResponse) {
      setVerificationInfo(verificationResponse);
      setComment(verificationResponse.comment);
      setINN(verificationResponse.taxnumber)
    }
  };

  const debouncedINNHC =  useDebouncedCallback((str) => {
      patchVerification({
        taxnumber: str.replace(/[^0-9]/g,""),
        id: verificationInfo?._id,
      });
    }, 2000);
  

  useEffect(() => {
    requestVefification();
  }, []);

  const verify = async (accepted: boolean) => {
    if (!verificationInfo) {
      return;
    }

    const [_, patchVerificationError] = await patchVerification({
      accepted,
      comment,
      id: verificationInfo._id,
      status: verificationInfo.status,
    });

    if (patchVerificationError) {
      return console.error("Error verifying:", patchVerificationError);
    }

    await requestVefification();
  };

  return (
    <Box sx={{ padding: "25px" }}>
      <Typography
        sx={{
          marginBottom: "10px",
          fontWeight: "bold",
          color: verificationInfo?.accepted ? "#0D9F00" : "#E02C2C",
        }}
      >
        {verificationInfo?.accepted ? "Верификация пройдена" : "Не верифицирован"}
      </Typography>
      {isLoading ? (
        <Typography
          sx={{ fontWeight: "bold", fontSize: "18px", marginBottom: "25px" }}
        >
          Загрузка данных...
        </Typography>
      ) : 
      verificationInfo && verificationInfo.files.length > 0 ? (
        verificationInfo.files.map(({ name, url }, index) => (
          <Box sx={{ marginBottom: "25px" }} key={name + url}>
            <Typography sx={{ fontWeight: "bold", fontSize: "18px" }}>
              {index + 1}.{" "}
              {name === "inn"
                ? "Скан ИНН организации (выписка из ЕГЮРЛ)"
                : name === "rule"
                ? "Устав организации"
                : name === "certificate"
                ? "Свидетельство о регистрации НКО"
                : `Скан документа ${index + 1}`}
            </Typography>
            <Typography>
              <a
               target="_blank"
                style={{
                  color: "#7E2AEA",
                  textDecoration: "none",
                  fontSize: "18px",
                }}
                href={url}
              >
                {url.split("/").pop()?.split(".")?.[0]}
              </a>
            </Typography>
          </Box>
        ))
      ) : (
        <Typography
          sx={{ fontWeight: "bold", fontSize: "18px", marginBottom: "25px" }}
        >
          Пользователь не загружал данные
        </Typography>
      )}
      <TextField
      value={INN}
      onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>{
        if (!verificationInfo) {
          return;
        }
        setINN(event.target.value)
        debouncedINNHC(event.target.value)}
      } 
      placeholder="ИНН"
      />
      {verificationInfo?.comment && (
        <Box sx={{ marginBottom: "15px" }}>
          <Typography
            component="span"
            sx={{ fontWeight: "bold", marginBottom: "10px" }}
          >
            Комментарий:
          </Typography>
          <Typography component="span"> {verificationInfo.comment}</Typography>
        </Box>
      )}
      <TextField
        multiline
        value={comment}
        rows={4}
        label="Комментарий"
        type=""
        sx={{
          width: "100%",
          maxWidth: "500px",
          marginBottom: "10px",
        }}
        onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
          setComment(event.target.value)
        }
      />
      <Box sx={{ display: "flex", columnGap: "10px" }}>
        <Button
          variant="text"
          sx={{ background: "#9A9AAF" }}
          onClick={() => verify(false)}
        >
          Отклонить
        </Button>
        <Button
          variant="text"
          sx={{ background: "#9A9AAF" }}
          onClick={() => verify(true)}
        >
          Подтвердить
        </Button>
      </Box>
    </Box>
  );
};