import * as React from "react";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import { memo, useContext } from "react";
import { inputProps } from "../interface/inputfieldProps";
import _ from "lodash";
import { JsonFormsDispatch, useJsonForms, withJsonFormsControlProps } from "@jsonforms/react";
import { DataContext } from "../context/Context";
import { Box } from "@mui/system";
import { IconButton } from "@mui/material";
import Grid from "@mui/material/Grid2";
import CloseButton from "../assets/PopupCloseButton";

const PopUp = memo(function (props: inputProps) {
  const { enabled, uischema, path, cells, schema, renderers } = props;
  const { dialog, updateDialog, theme,serviceProvider } = useContext(DataContext);
  const ctx = useJsonForms();
  const onClose = (e) => {
  updateDialog(path);
  serviceProvider(ctx, uischema?.config?.main, {
   event: { ...e, _reactName: 'onClose' },
   uischemaData,
   ...uischema?.config?.main?.additionalData,
   path,
  });
 };
  const uischemaData = uischema?.config?.main;

  const getElements = (UiSchemaElem: any, i: number) => {
    const scopeArray: string[] = UiSchemaElem.scope?.split("/");
    const actualElemPath: string = scopeArray
      ? scopeArray[scopeArray.length - 1]
      : UiSchemaElem.scope;
    const widget = _.cloneDeep(UiSchemaElem);
    widget.config.main.additionalData = {
      ...widget?.config?.main?.additionalData,
      tableButtonPath: actualElemPath,
    };
    return (
      <Grid
        key={i}
        size={{
          xs: UiSchemaElem?.config?.layout
            ? UiSchemaElem?.config?.layout.xs
              ? UiSchemaElem?.config?.layout.xs
              : UiSchemaElem?.config?.layout
            : 12,

          sm: UiSchemaElem?.config?.layout
            ? UiSchemaElem?.config?.layout.sm
              ? UiSchemaElem?.config?.layout.sm
              : UiSchemaElem?.config?.layout
            : 12,

          md: UiSchemaElem?.config?.layout
            ? UiSchemaElem?.config?.layout.md
              ? UiSchemaElem?.config?.layout.md
              : UiSchemaElem?.config?.layout
            : 12,

          lg: UiSchemaElem?.config?.layout
            ? UiSchemaElem?.config?.layout.lg
              ? UiSchemaElem?.config?.layout.lg
              : UiSchemaElem?.config?.layout
            : 12,
        }}
      >
        <JsonFormsDispatch
          schema={schema}
          uischema={{ ...widget }}
          renderers={renderers}
          enabled={enabled}
          cells={cells}
        />
      </Grid>
    );
  };
  const Content = uischema?.elements?.map((e: any, i: number) => {
    return getElements(e, i);
  });
  return (
    <React.Fragment>
      <Dialog
        open={dialog[path]}
        fullScreen={uischemaData?.fullScreen || false}
        fullWidth={uischemaData?.fullWidth || true}
        maxWidth={uischemaData?.maxWidth || "sm"}
        sx={{
          "& .MuiPaper-root": {
            width: "25%",
            borderRadius: "12px",
          },
          "& .MuiTypography-root": {
            padding: 0,
          },
          ...uischema?.config?.style,
        }}
        aria-labelledby="draggable-dialog-title"
      >
        <Box
          sx={{
            display: "flex",
            justifyContent: "end",
          }}
        >
          <IconButton
            sx={{
              padding: "2px",
              color: "transparent",
              "&:hover": {
                backgroundColor: "transparent",
                color: theme.myTheme.palette.grey[300],
              },
            }}
            onClick={(e) => onClose(e)}
          >
            <CloseButton color={theme.myTheme.palette.grey[600]} />
          </IconButton>
        </Box>
        <DialogTitle id="draggable-dialog-title">
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
            }}
          >
            <Box
              sx={{
                flexGrow: 1,
                textAlign: "center",
                fontWeight: "Bold",
                fontSize: 24,
              }}
            >
              {uischemaData.title}
            </Box>
            {/* <Box>
              <IconButton onClick={() => closeButton()}>
                <HighlightOffOutlinedIcon color={theme.myTheme.palette.common.black} />
              </IconButton>
            </Box> */}
          </Box>
        </DialogTitle>
        <Grid
          container
          rowSpacing={uischema.config?.main?.rowSpacing || 2}
          columnSpacing={uischema.config?.main?.columnSpacingSpacing || 2}
          spacing={uischema.config?.main?.spacing || 2}
          size={{
            xs: 11.8,
            sm: 11.8,
            md: uischema?.config?.layout || 11.5,
          }}
          sx={{
            gap: uischema.config?.main?.gap,
            justifyContent: "space-around",
            width: { xs: "100%", sm: "100%", md: "98%" },
            margin: "8px auto ",
            background: "inherit",
            borderRadius: "20px",
            paddingBottom: uischema.config?.main?.label ? "10px" : "auto",
            ...uischema?.config?.style?.wrapperStyle,
          }}
        >
          {Content}
        </Grid>
      </Dialog>
    </React.Fragment>
  );
});

export default withJsonFormsControlProps(PopUp);