import { Box, Dialog, IconButton, Typography, useTheme } from "@mui/material";
import CustomButton from "@root/components/CustomButton";
import CloseSmallIcon from "@root/components/icons/CloseSmallIcon";
import { closeDocumentsDialog, sendDocuments, setDocument, useUserStore } from "@root/stores/user";
import DocumentUploadItem from "./DocumentUploadItem";
import DocumentItem from "./DocumentItem";


export default function NkoDocumentsDialog() {
    const theme = useTheme();
    const isOpen = useUserStore(state => state.isDocumentsDialogOpen);
    const verificationStatus = useUserStore(state => state.verificationStatus);
    const documents = useUserStore(state => state.documents);

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

    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 === "verificated" ? "Ваши документы" : "Загрузите документы"}
                </Typography>
                <Typography sx={{
                    fontWeight: 400,
                    fontSize: "16px",
                    lineHeight: "100%",
                    mt: "12px",
                }}>для верификации НКО в формате PDF</Typography>
                <Box sx={{
                    mt: "30px",
                    display: "flex",
                    flexDirection: "column",
                    gap: "25px",
                }}>
                    {documentElements}
                </Box>
            </Box>
            <CustomButton
                onClick={sendDocuments}
                variant="contained"
                sx={{
                    width: "180px",
                    height: "44px",
                    alignSelf: "end",
                    backgroundColor: theme.palette.brightPurple.main,
                    textColor: "white",
                }}
            >
                Отправить
            </CustomButton>
        </Dialog>
    );
}