import { Box, Button, Dialog, IconButton, Typography } from "@mui/material";
import CloseSmallIcon from "@root/components/icons/CloseSmallIcon";
import { closeDocumentsDialog, setDocument, useUserStore } from "@root/stores/user";
import DocumentUploadItem from "./DocumentUploadItem";
import DocumentItem from "./DocumentItem";
import { verify } from "../helper";
import { VerificationStatus } from "@root/model/account";
import { sendDocuments } from "@root/api/verification";
import { readFile } from "@root/utils/readFile";

const dialogContainerStyle = {
  height: "100%",
  overflowY: "scroll",
  "::-webkit-scrollbar": {
    display: "none",
  },
};

export default function NkoDocumentsDialog() {
  const isOpen = useUserStore((state) => state.isDocumentsDialogOpen);
  const verificationStatus = useUserStore((state) => state.verificationStatus);
  const documents = useUserStore((state) => state.documents);
  const documentsUrl = useUserStore((state) => state.documentsUrl);
  const userId = useUserStore((state) => state.userId) ?? "";

  const sendUploadedDocuments = async () => {
    closeDocumentsDialog();

    if (!documents["ИНН"].file || !documents["Устав"].file || !documents["Свидетельство о регистрации НКО"].file)
      return;

    const inn = await readFile(documents["ИНН"].file, "binary");
    const rule = await readFile(documents["Устав"].file, "binary");
    const certificate = await readFile(documents["Свидетельство о регистрации НКО"].file, "binary");

    await sendDocuments({ status: "nko", inn, rule, certificate });

    setDocument("ИНН", null);
    setDocument("Устав", null);
    setDocument("Свидетельство о регистрации НКО", null);

    await verify(userId);
  };

  const documentElements =
    verificationStatus === VerificationStatus.VERIFICATED ? (
      <>
        <DocumentItem
          text="1. Свидетельство о регистрации НКО"
          documentUrl={documentsUrl["Свидетельство о регистрации НКО"]}
        />
        <DocumentItem text="2. Скан ИНН организации НКО (выписка из ЕГЮРЛ)" documentUrl={documentsUrl["ИНН"]} />
        <DocumentItem text="3. Устав организации" documentUrl={documentsUrl["Устав"]} />
      </>
    ) : (
      <>
        <DocumentUploadItem
          text="1. Свидетельство о регистрации НКО"
          accept="application/pdf"
          document={documents["Свидетельство о регистрации НКО"]}
          documentUrl={documentsUrl["Свидетельство о регистрации НКО"]}
          onFileChange={(e) => setDocument("Свидетельство о регистрации НКО", e.target?.files?.[0] || null)}
        />
        <DocumentUploadItem
          text="2. Скан ИНН организации НКО (выписка из ЕГЮРЛ)"
          accept="application/pdf"
          document={documents["ИНН"]}
          documentUrl={documentsUrl["ИНН"]}
          onFileChange={(e) => setDocument("ИНН", e.target?.files?.[0] || null)}
        />
        <DocumentUploadItem
          text="3. Устав организации"
          accept="application/pdf"
          document={documents["Устав"]}
          documentUrl={documentsUrl["Устав"]}
          onFileChange={(e) => setDocument("Устав", e.target?.files?.[0] || null)}
        />
      </>
    );

  return (
    <Dialog
      open={isOpen}
      onClose={closeDocumentsDialog}
      PaperProps={{
        sx: {
          width: "600px",
          maxWidth: "600px",
          backgroundColor: "white",
          position: "relative",
          display: "flex",
          flexDirection: "column",
          p: "20px",
          gap: "20px",
          borderRadius: "12px",
          boxShadow: "none",
        },
      }}
      slotProps={{
        backdrop: { style: { backgroundColor: "rgb(0 0 0 / 0.7)" } },
      }}
    >
      <IconButton
        onClick={closeDocumentsDialog}
        sx={{
          position: "absolute",
          right: "7px",
          top: "7px",
        }}
      >
        <CloseSmallIcon />
      </IconButton>
      <Box
        sx={{
          p: "20px",
        }}
      >
        <Typography variant="h5" lineHeight="100%">
          {verificationStatus === VerificationStatus.VERIFICATED ? "Ваши документы" : "Загрузите документы"}
        </Typography>
        <Typography
          sx={{
            fontWeight: 400,
            fontSize: "16px",
            lineHeight: "100%",
            mt: "12px",
          }}
        >
          для верификации НКО в формате PDF
        </Typography>
        <Box sx={dialogContainerStyle}>
          <Box
            sx={{
              maxHeight: "280px",
              mt: "30px",
              display: "flex",
              flexDirection: "column",
              gap: "25px",
            }}
          >
            {documentElements}
            {documentElements}
          </Box>
        </Box>
      </Box>
      {verificationStatus === VerificationStatus.NOT_VERIFICATED && (
        <Button onClick={sendUploadedDocuments} variant="pena-contained-dark" sx={{ alignSelf: "end" }}>
          Отправить
        </Button>
      )}
      <></>
    </Dialog>
  );
}