import Dialog from "@mui/material/Dialog";
//import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import {Grid} from "@mui/material";
import * as React from "react";
import {getDateString} from "../../utils/CommonFunction";
import MainCard from "../../components/MainCard";
//import {isObjEmpty} from "../../utils/Utils";
import {Typography} from "@mui/material";

const AuditLogDetailWindow = ({   isWindowOpen,
                                  title,
                                  record,
                                  onNormalClose,
                                  tableName
                                }) => {

    // console.log(record);
    // if(!isObjEmpty(record)){
    //     console.log(JSON.parse(record.newData));
    //     console.log(JSON.parse(record.oldData));
    // }

    function renderNestedKeyValuePairs(data) {
        const excludedKeys = [
            "createdById", "modifiedById", "userId",
            "eventId", "applicationId","categoryId",
            "subDivisionIds", "user_auth_id", "user_group_id",
            "group_user_id", "group_auth_id"
        ];

        const dayKeys = [
            "applicationDeadline", "startDate",
            "announcementDate", "applicationDeadline",
            "awardDate", "nextApplicationDate",
            "receiveDate","eventFrom", "eventTo",
            "lnReceiptDate", "receiptDate", "staffReplyDate",
            "clientReplyDate"
        ];
        const sortedData = Object.entries(data)
            .filter(([key]) => !excludedKeys.includes(key))
            .sort(([keyA], [keyB]) => {
                const topKeys = ["id", "version", "modifiedBy", "modified", "createdBy", "created", "deleted"];
                if (topKeys.includes(keyA)) {
                    if (topKeys.includes(keyB)) {
                        return topKeys.indexOf(keyA) - topKeys.indexOf(keyB);
                    } else {
                        return -1;
                    }
                } else if (topKeys.includes(keyB)) {
                    return 1;
                }
                return keyA.localeCompare(keyB);
            })
            .map(([key, value]) => {
                if (typeof value === "object" && value !== null) {
                    // Handle nested objects recursively
                    return (
                        <div key={key}>
                            <strong>{key}: </strong>
                            {value.toString()}
                        </div>
                    );
                } else {
                    // Render non-nested key-value pairs
                    return (
                        <div key={key}>
                            <strong>{key}: </strong>{" "}
                            {value === null ? "" : dayKeys.includes(key) ? value.toString().split('T')[0] : value.toString() }
                        </div>
                    );
                }
            });

        return sortedData;
    }

    return (
        !(Object.keys(record).length > 0 && record !== undefined) ?
        <div/>
            :
        <Dialog
            open={isWindowOpen}
            onClose={onNormalClose}
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
            PaperProps={{
                sx: {
                    maxWidth: "70vw",
                    maxHeight: '80vh'
                }
            }}
        >
            {/*<DialogTitle id="alert-dialog-title">*/}
            {/*    <Typography variant="lionerBold" component="span">*/}
            {/*    {title}*/}
            {/*    </Typography>*/}
            {/*</DialogTitle>*/}
            <DialogContent>
                <Grid item xs={12} s={12} md={12} lg={12}>
                    <Grid container>
                        <Grid item xs={12} s={12} md={12} lg={12} sx={{mb: 1}}>
                            <Grid container alignItems={"left"}>
                                {
                                    tableName === "apr_appreciation"?
                                        <Grid/>
                                        :
                                        <Grid item xs={4} s={4} md={4} lg={4}
                                              sx={{mr: 3, display: 'flex', alignItems: 'left'}}>
                                            <Typography variant="lionerBold" component="span">
                                                Record Name:
                                            </Typography>
                                        </Grid>
                                }
                                {
                                    tableName === "apr_appreciation"?
                                        <Grid/>
                                        :
                                        <Grid item xs={7} s={7} md={7} lg={6}>
                                            <Typography variant="lionerSize" component="span">
                                                {title}
                                            </Typography>
                                        </Grid>
                                }

                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{mr: 3, display: 'flex', alignItems: 'left'}}>
                                    <Typography variant="lionerBold" component="span">
                                    Modified By:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <Typography variant="lionerSize" component="span">
                                    {record.username}
                                    </Typography>
                                </Grid>

                                <Grid container alignItems={"left"} sx={{mb:3}}>
                                    <Grid item xs={4} s={4} md={4} lg={4}
                                          sx={{mr: 3, display: 'flex', alignItems: 'left'}}>
                                        <Typography variant="lionerBold" component="span">
                                        Modified Date:
                                        </Typography>
                                    </Grid>

                                    <Grid item xs={7} s={7} md={7} lg={6} >
                                        <Typography variant="lionerSize" component="span">
                                        {record.modified === null ? '' : getDateString(record.modified,true)}
                                        </Typography>
                                    </Grid>

                                </Grid>

                                <Grid item xs={12} s={12} md={12} lg={12}>
                                    <Grid container>
                                        <Grid item s={5.8} md={5.8} lg={5.8} sx={{mr:1}}>
                                            <Typography variant="lionerBold" component="span">
                                            Old Data
                                            </Typography>
                                            <MainCard>
                                                <Typography variant="lionerSize" component="span">
                                                {renderNestedKeyValuePairs(JSON.parse(record.oldData))}
                                                </Typography>
                                            </MainCard>
                                        </Grid>
                                        <Grid item s={5.8} md={5.8} lg={5.8} sx={{ml:1}}>
                                            <Typography variant="lionerBold" component="span">
                                            New Data
                                            </Typography>
                                            <MainCard>
                                                {/*{prettyJson(record.newData)}*/}
                                                <Typography variant="lionerSize" component="span">
                                                {renderNestedKeyValuePairs(JSON.parse(record.newData))}
                                                </Typography>
                                            </MainCard>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>

                    </Grid>
                </Grid>

            </DialogContent>
        </Dialog>
    )
}

export default AuditLogDetailWindow;
