import * as React from "react";
import MuiPopover from "@mui/material/Popover";
import { memo, useContext } from "react";
import { inputProps } from "../interface/inputfieldProps";
import _ from "lodash";
import { JsonFormsDispatch, withJsonFormsControlProps } from "@jsonforms/react";
import { DataContext } from "../context/Context";
import { Box } from "@mui/system";
import Grid from "@mui/material/Grid2";

const Popover = memo(function (props: inputProps) {
  const { enabled, uischema, path, cells, schema, renderers } = props;
  const { dialog, updateDialog, theme, targetElementMap } = useContext(DataContext);

  const uischemaData = uischema?.config?.main;
  const handleClose = () => {
    updateDialog(path);
  };

  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?.xs ?? 12,
            sm: UiSchemaElem?.config?.layout?.sm ?? 12,
            md: UiSchemaElem?.config?.layout?.md ?? 12,
            lg: UiSchemaElem?.config?.layout?.lg ?? 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>
      <MuiPopover
        open={dialog[path] || false}
        anchorEl={targetElementMap?.[path] ?? null} 
        onClose={handleClose}
        anchorOrigin={{
          vertical: uischemaData?.positionVertical || "bottom",
          horizontal: uischemaData?.positionHorizontal || "center",
        }}
        transformOrigin={{
          vertical: uischemaData?.contentVertical || "top",
          horizontal: uischemaData?.contentHorizontal || "center",
        }}
        sx={{
          "& .MuiPaper-root": {
            borderRadius: "12px",
            boxShadow: "0px 4px 20px rgba(0,0,0,0.12)",
            width: `${uischemaData?.width}px`,
            ...uischema?.config?.style?.paperStyle,
          },
          ...uischema?.config?.style,
        }}
      >
        <Box
          sx={{
            padding: uischemaData?.padding || "8px",
            background: theme?.myTheme?.palette?.background?.paper,
            ...uischema?.config?.style?.containerStyle,
          }}
        >
          <Grid
            container
            rowSpacing={uischema.config?.main?.rowSpacing || 2}
            columnSpacing={uischema.config?.main?.columnSpacing || 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: "12px",
              paddingBottom: "10px",
              ...uischema?.config?.style?.wrapperStyle,
            }}
          >
            {Content}
          </Grid>
        </Box>
      </MuiPopover>
    </React.Fragment>
  );
});

export default withJsonFormsControlProps(Popover);